Order column CSS

Question

I'm working on a website and I've this code :

.container {
    -webkit-column-count: 4;
    -webkit-column-gap: 1em;
  
}

.container div {
  background-color: lightblue;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
  
}

<div class="container">
  <div>1 .Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere natus amet, architecto maxime cum adipisci, deleniti quasi non sed, totam accusamus placeat quibusdam ipsam?.</div>
  <div>2. Sit ducimus delectus labore veritatis dicta earum fugit cum repellat est perspiciatis impedit, architecto ut officiis placeat quidem aspernatur dolores assumenda nostrum dolorem quo rerum hic? Repudiandae facilis, cum dignissimos.</div>
  <div>3. Libero enim saepe magnam eaque ratione odio deleniti, nostrum ullam eum ea eveniet hic voluptatum tempora voluptatibus voluptates asperiores, aut laudantium rem quod minus cum accusantium placeat blanditiis esse. Praesentium.</div>
  <div>4. Id ipsum ullam placeat laboriosam nam repellat obcaecati, adipisci necessitatibus illo accusamus error voluptatibus sit, animi fugiat sequi magni? Eum sint porro, cum, ratione quo maxime harum quibusdam totam itaque?</div>
  <div>5. Eveniet illum alias totam, quisquam magnam inventore ad quidem nemo sunt pariatur saepe, minima qui nam sapiente in blanditiis reiciendis? Omnis reiciendis corporis asperiores minima assumenda, quae accusamus culpa numquam!</div>
  <div>6. ipsum quaerat aliquam dolor fuga, rem. Quis culpa, excepturi magni ducimus voluptatem dolores quod placeat ut eum odio sit fugit vitae, cum voluptatum vel ipsum mollitia sed, laborum praesentium!</div>
</div>

I want to display divs like :

1 / 2 / 3 / 4 

5 / 6

Thanks for your help !

Answer 1

Don't use CSS columns - their support across browsers is poor.

Do it with floats:

.container div {
    width: 25%;
    float:left;
}