Teaching step

order: 1 sent it to the back

MediumOrderF37

Two chips need to go to the front, so they got order: 1 and order: 2. Both ended up at the far right, in the order they were numbered, behind every chip that has no order at all.

Five chips. Two of them carry the class .pin — chips 3 and 5. Move the pinned chips to the front of the row, in document order (3 then 5), and leave the rest in the order they were written (1, 2, 4). Do not touch the markup. The starter is the numbering everybody writes first. Run it and see where the chips go.

Hint

What `order` does every chip you did NOT write a rule for have? Your numbers have to be compared against that one.

Live preview900×260

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="rail"><div class="chip c1"></div><div class="chip c2"></div><div class="chip c3 pin"></div><div class="chip c4"></div><div class="chip c5 pin"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.rail { width: 500px; height: 90px; display: flex; align-items: center; background: #16161d; }
.chip { flex: none; width: 100px; height: 56px; background: #7bdff2; }
.pin { background: #ffd166; }