Swapping Columns (left / Right) On Alternate Rows

I have a series of rows, each containing two columns, split 50/50 in width. I'd like every other row to swap the left column (.image) to the right right, but I need to maintain the

Solution 1:

you may use display:table(optionnal), :nth-child(even) and direction to swap div position : codepen

ul {
  margin: 0;
  padding: 0;
  width: 100%;
}
.row {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.row:nth-child(even) {
  direction: rtl;
}
.row:nth-child(odd) .image {
  text-align: right
}
.image,
.text {
  display: table-cell;
  direction: ltr;
  border: solid;
}
.text {
  background: tomato;
}
img {vertical-align:top;}
@media screen and (max-width: 640px) {
  .row,
  .image,
  .text {
    display: block;
    direction:ltr
  }
  .row:nth-child(odd) .text {
  text-align: right
}
}

<ul><liclass="row"><divclass="image"><imgsrc="http://placehold.it/350x150"></div><divclass="text"><p>Lorem ipsum</p></div></li><liclass="row"><divclass="image"><imgsrc="http://placehold.it/350x150"></div><divclass="text"><p>Lorem ipsum</p></div></li><liclass="row"><divclass="image"><imgsrc="http://placehold.it/350x150"></div><divclass="text"><p>Lorem ipsum</p></div></li></ul>

Solution 2:

Try this:

/* CSS */.row.image {
   display: table-cell
}
.row.text {
   display: table-cell;
   vertical-align: top;
}
.row:nth-child(even) .image {
   float: right;
}
.row {
   clear: both;
}

Here is a working plunker

Solution 3:

I don't really understand what you mean by "aligned vertically to one another". How exactly aligned?

But maybe you want to align them vertically using vertical-align: middle and then, yes, float: left is not your friend.

You say that your columns split 50/50 in width. Then you can use position: relative with left: 50%; and right: 50%; rules.

Like this:

.row {
  display: block;
  position: relative;
}

.row > .image {
  display: inline-block;
  position: relative;
  width: 50%;
  background-color: #eef;
  vertical-align: middle;
}
.row > .text {
  display: inline-block;
  position: relative;
  width: 50%;
  background-color: #fee;
  vertical-align: middle;
}

.row:nth-child(even) > .image {
  left: 50%;
}
.row:nth-child(even) > .text {
  right: 50%;
}

The background color is just for demonstration.

This way each even row will swap columns and you can still use vertical-align rule. See the plunker.