How can I keep my column-count column sorting when adding new elements?

Question

I have a page with a "load more" feature. I use the column-count CSS property to divide it into two columns.

When I click to load more, the first 4 divs change sorting and they all are in the first column. Check the drawing below or https://elodywedding.com/reviews1

I would need the first 4 divs to stay in the same place and only append the rest.

Is there any solution or workaround that works on most browsers?

.parrent {
    column-count: 2;
}

<div class="parrent">
    <div class="block">content 1</div>
    <div class="block">content 2</div>
    <div class="block">content 3</div>
    <div class="block">content 4</div>
</div>

Check [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Wee need code to help you solving the problem — Arkej, Nov 10 '17 at 14:29
Your code does not represent the illustration you made. Can you please add all the code required to make your MCVE match your illustration of your alleged output? — TylerH, Nov 10 '17 at 14:46
I think it should match it. Because the 2x2 grid makes css property column-count — Filip, Nov 10 '17 at 18:08

score 0 · Answer 1 · answered Nov 10 '17 at 14:39

I suggest you to use flexbox. Check a guide here

.parrent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }

.block {
  width: 50%;
}

<div class="parrent">
<div class="block">content 1</div>
<div class="block">content 2</div>
<div class="block">content 3</div>
<div class="block">content 4</div>
</div>

How can I keep my column-count column sorting when adding new elements?

1 Answers1