How to make every second post reversed from first with nth-child - html

Question

I saw on http://www.webdesignerdepot.com/ that even posts have image to the right, and odd posts image to the left. This is without a doubt solved with css.
I tried to solve this with css, but without success.
This is the code i have:
<div class="row">
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6" image>
<div class="col-xs-12 col-md-6" text>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6" image>
<div class="col-xs-12 col-md-6" text>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6" image>
<div class="col-xs-12 col-md-6" text>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6" image>
<div class="col-xs-12 col-md-6" text>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6" image>
<div class="col-xs-12 col-md-6" text>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6" image>
<div class="col-xs-12 col-md-6" text>
</div>
</div>
</div>
i Want to make something like webdesignerdepot.com
Like this image i made:
Thanks for any ideas!

Answer 1

As others have mentioned, you can utilize CSS' float attributes, along with nth-child(odd) and nth-child(even) selectors.
Check this jsfiddle where I've used the following CSS:
.post:nth-child(odd) .row div:nth-child(odd),
.post:nth-child(even) .row div:nth-child(even) {
float: left;
height: 260px;
overflow: hidden;
width: 50%;
}
.post:nth-child(odd) .row div:nth-child(even),
.post:nth-child(even) .row div:nth-child(odd) {
float: right;
height: 260px;
overflow: hidden;
width: 50%;
}
div {
box-shadow: inset 0px 0px 1px #000;
}

Answer 2

Without float but display, direction will do the job for you.
display:flex;
.row .row {
display:flex;
width:400px;
height:200px;
border:red solid;
}
.row div .row >div {
flex:1;
display:flex;
align-items:center;
justify-content:center;
height:100%;
background:turquoise;
border:solid red;
direction:ltr;
}
.row .row div:nth-child(even) {
background:tomato;
}
.row :nth-child(even) .row{
direction:rtl;
}
<div class="row">
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6"> image</div>
<div class="col-xs-12 col-md-6"> text</div>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6"> image</div>
<div class="col-xs-12 col-md-6"> text</div>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6"> image</div>
<div class="col-xs-12 col-md-6"> text</div>
</div>
</div>
Or display:table
.row .row {
display:table;
table-layout:fixed;
width:400px;
height:200px;
border:red solid;
}
.row div .row >div {
display:table-cell;
text-align:center;
vertical-align:middle;
background:turquoise;
border:solid red;
direction:ltr;
}
.row .row div:nth-child(even) {
background:tomato;
}
.row :nth-child(even) .row{
direction:rtl;
}
<div class="row">
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6"> image</div>
<div class="col-xs-12 col-md-6"> text</div>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6"> image</div>
<div class="col-xs-12 col-md-6"> text</div>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6"> image</div>
<div class="col-xs-12 col-md-6"> text</div>
</div>
</div>
</div>
or display:flex and order
.row .row {
display: flex;
width: 400px;
height: 200px;
border: red solid;
}
.row div .row >div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: turquoise;
border: solid red;
}
.row .row div:nth-child(even) {
background: tomato;
}
.row :nth-child(even) .row div:nth-child(even) {
order: -1
}
<div class="row">
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6">image</div>
<div class="col-xs-12 col-md-6">text</div>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6">image</div>
<div class="col-xs-12 col-md-6">text</div>
</div>
</div>
<div class="col=xs-12 post">
<div class="row">
<div class="col-xs-12 col-md-6">image</div>
<div class="col-xs-12 col-md-6">text</div>
</div>
</div>
</div>

Answer 3

I can see that you're using Bootstrap. Maybe it would be worth you using their built-in .col-md-push-* and .col-md-pull-* modifier classes to swap them around.
From the Bootstrap docs:
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
What this will result in is the two columns being reversed in order (.col-md-9 will render as coming after .col-md-3).

Answer 4

I would go with #krypsin's answer as you seem to be using bootstrap. But if you weren't, you could use css to do something like:
.post:nth-of-type(even) .row .col-xs-12.col-md-6:first-of-type{
float: right;
}
.post:nth-of-type(even) .row .col-xs-12.col-md-6:last-of-type{
float: left;
}
The :nth-of-type(even) applies styles to the children of every second .post class. The :last-of-type selector picks the last instance of that element type, and the :first-of-type selector applies styles to the first instance.