CSS vertical align in box columns

Question

I am trying to vertical align text in two columns. However, it will not do vertically due to the float:left; if I remove it the text will align vertically, but it messes up the columns. The text column in the first row will move to right.

The expected result is two rows. First row has 2 columns, a vertically aligned text and the image. Second row also has 2 columns, an image and a vertically aligned text. In the mobile mode, it should be 4 rows; image, text, image, text.

The code is as follows:

* {
  box-sizing: border-box;
}

.pull-right {
  float: right !important;
}

.col-sm {
  width: 42%;
}

.col-la {
  width: 58%;
}

.column {
  float: left;
}

.row {
  padding: 40px 0;
  display: table;
  clear: both;
}

.vtext {
  display: table-cell;
  vertical-align: middle;
}
.addpad {padding-left: 25px;}  
@media screen and (max-width:768px) {
  .column {
    width: 100%;
  }
  .pull-right {
    float: none !important;
  }
}

<div class="row">
  <div class="column col-sm addpad pull-right">
    <img src="http://4.bp.blogspot.com/_oFaTRQXpeNg/TREVkIP-B0I/AAAAAAAAAG0/x10ih2-WZ8Q/s1600/001.jpg">
  </div>
  <div class="column col-la vtext">
    <b>First text column:</b>
    <ol>
      <li>It is on the left
        <li>with 3 bullet points
          <li>flowing to the left
    </ol>
    Shall become second row in mobile
  </div>
</div>
<div class="row">
  <div class="column col-sm">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/67/Hoffl%C3%B6th(T%C3%B6Vo-Cl%C3%B6rath)-2(400x400).jpg">
  </div>
  <div class="column col-la addpad vtext">
    <b>Second text column:</b>
    <ol>
      <li>flows to the right on desktop.
        <li>it has 3 bullet points
          <li>it will be the 4th rows on mobile
    </ol>
    <p>
      Text after bullets
  </div>
</div>
<b>Just some text not in the row.</b>

Your assistance is much appreciated.

Answer 1

The way you're trying to vertically align the text, using the code below, doesn't seem to work. That's because display:table-cell gets automatically disabled by the rendering engine because the element is floated.

.vtext {
    display: table-cell;
    vertical-align: middle;
}

That's caused by this code:

.column {
  float: left;
}

which is floating all elements with class="column", including the text you're trying to align. What you can do is remove that CSS, and reorder some elements in the HTML so the image appears on the right without needing to float it. We'll also need to individually apply CSS to the first row, so you can add class="row first-row" to it. We'll also add class="img1" to the image so we can change its size later (and class="img2" to the other one). This HTML for the first row should work:

<div class="row first-row">
    <div class="column col-la vtext">
        <b>First text column:</b>
        <ol>
        <li>It is on the left
        <li>with 3 bullet points
        <li>flowing to the left
        </ol>
        Shall become second row in mobile
    </div>
    <div class="column col-sm pull-right">
        <img class="img1" src="http://4.bp.blogspot.com/_oFaTRQXpeNg/TREVkIP-B0I/AAAAAAAAAG0/x10ih2-WZ8Q/s1600/001.jpg">
    </div>
</div>

Now, we'll add a margin to the first row, so it lines up nicely with the other one:

.first-row {
    margin-left: 500px
}

The 500px size of the margin probably won't be a problem on desktops, but it will be on phones, and so will the large images. So let's reduce the margin and image size for small screens by changing @media to:

@media screen and (max-width:768px) {
  .column {
    width: 100%;}
  .pull-right {
    position: absolute;
  left: 1%;
  }
    .first-row {
        margin-left: 100px !important;
         }
    .img1 {
        height: 100px;
        width: 100px;
}
    .img2 {
        height: 100px;
        width: 100px;
        margin-right: 10px !important;
        position: absolute;
        top: 290px;
        left: 10%;
    }
}

That code will position the image on the left. You can adjust the left: and margin-left: properties if you need to change its position.

If you want the images to be on top of the text, use this for @media instead:

@media screen and (max-width:768px) {
  .column {
    width: 100%;}
  .pull-right {
    position: absolute;
  left: 10%;
      top: 3%
  }
    .first-row {
        margin-left: 10px !important;
        margin-top: 100px; }
    .img1 {
        height: 100px;
        width: 100px;
}
    .img2 {
        height: 100px;
        width: 100px;
        margin-right: 10px !important;
        position: absolute;
        top: 290px;
        left: 10%
    }
    .second-row {
        padding-top: 100px;
    }
}

Your final code would be (with both images on the top on mobile):

* {box-sizing: border-box;}

.col-sm {
    width: 42%;}
.col-la {
    width: 58%;}
.row {
    padding: 40px 0;
    display: table;
    clear: both;}
.vtext {display: table-cell;
    vertical-align: middle;}
@media screen and (max-width:768px) {
  .column {
    width: 100%;}
  .pull-right {
    position: absolute;
  left: 10%;
      top: 3%
  }
    .first-row {
        margin-left: 10px !important;
        margin-top: 100px; }
    .img1 {
        height: 100px;
        width: 100px;
}
    .img2 {
        height: 100px;
        width: 100px;
        margin-right: 10px !important;
        position: absolute;
        top: 290px;
        left: 10%
    }
    .second-row {
        padding-top: 100px;
    }
}
.first-row {
    margin-left: 500px
}
.img2 {
    margin-right: 125px;
}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row first-row">
    <div class="column col-la vtext">
        <b>First text column:</b>
        <ol>
        <li>It is on the left
        <li>with 3 bullet points
        <li>flowing to the left
        </ol>
        Shall become second row in mobile
    </div>
    <div class="column col-sm pull-right">
        <img class="img1" src="http://4.bp.blogspot.com/_oFaTRQXpeNg/TREVkIP-B0I/AAAAAAAAAG0/x10ih2-WZ8Q/s1600/001.jpg">
    </div>
</div>
<div class="row second-row">
    <div class="column col-sm">
    <img class="img2"src="https://upload.wikimedia.org/wikipedia/commons/6/67/Hoffl%C3%B6th(T%C3%B6Vo-Cl%C3%B6rath)-2(400x400).jpg">
    </div>
    <div class="column col-la vtext">
    <b>Second text column:</b>
    <ol>
    <li>flows to the right on desktop.
    <li>it has 3 bullet points
    <li>it will be the 4th rows on mobile
    </ol>
    <p>
    Text after bullets
    </div>
</div>
<b>Just some text not in the row.</b>
</body>
</html>