CSS: Convert a two column stack into a single with @media queries

1 Views

I have two <divs> (left-col, right-col) containing WordPress posts (the more recent, the lower the number) 

left-col | right-col
--------------------
--post 1 | --post 2
--post 3 | --post 4
--post 5 | --post 6

Using @media and CSS I would like to convert this into a single column like this:

Read More
single-col
----------
--post 1
--post 2
--post 3
--post 4
etc.

Notice that I am not trying to push the right-col under the left-col but also change how the posts pile up.

Currently my s have following relevant values: 

#left-col {
    width: 420px;
    float: left;
}
#right-col {
    width: 420px;
    float: left;    
}

ALTERNATIVE QUESTION: is there any other way to get this two column layout flat for mobile screens, even if it needs more thank CSS/media query?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. I’d solve this without the column divs and possibly use the nth-child css selector

    Something like:

    Demo on jsfiddle

    .posts > div {
    width: 100%;
}

@media all and (min-width: 600px){
    .posts > div {
         width: 50%;
    }

    // optional: additional styles specific to either column
    .posts > div:nth-child(2n) {
         color: red;
    }

    .posts > div:nth-child(2n+1) {
         color: blue;
    }
}

<div class="posts">
    <div>Post Content</div>
    <div>Post Content</div>
    <div>Post Content</div>
    <div>Post Content</div>
    <div>Post Content</div>
    <div>Post Content</div>
</div>