Responsive 2 Columns for Mobiles

It’s better to separate HTML & CSS instead of doing it inline. It’s much cleaner; plus, in the future, you won’t have to repeat those styles every time you want to use your columns.

HTML

<div class="article-custom-column">
    <!-- Column #1 -->
</div>

<div class="article-custom-column">
    <!-- Column #2 -->
</div>

For the responsive part, I’m going to assume that your theme is mobile-first, and the mobile breakpoint is 768px . . . just because that’s popular nowadays thanks to Bootstrap.

CSS

/* ==============================
   Custom columns for articles
   ============================== */

/**
 * Assume mobile first,
 * so we default to 100% width & collapse to single column on mobile devices.
 */

.article-custom-column {
  display: block;
  width: 100%;
}

/**
 * .article-custom-columns on larger devices,
 * styles will apply once screen reaches the minimum width.
 */

@media screen and (min-width: 768px) {

  /* reduce width to half, allowing 2 columns to be next to each other */
  .article-custom-column {
    display: inline-block;
    width: 48%;
  }

  /* On left columns, add right margin to create some space with right column */
  .article-custom-column:nth-child(odd) {
    margin-left: 0;
    margin-right: 1%;
  }

  /* On right columns, add left margin to create some space with from left column  */
  .article-custom-column:nth-child(even) {
    margin-left: 1%;
    margin-right: 0;
  }
}

And we don’t need to clear floats with this.

See it in action on JSFiddle: https://jsfiddle.net/g51m52yr/2/
(drag the vertical border in between the code panels left and right to see the responsive effects)