Multicol Swop

Correcting order for mobile when multicols become single column.

by Ben Clayton

HTML

<div class="multicol">

<div class="col">
Picture A
</div><div  class="col">
Text A
</div>

</div>


<div class="multicol swop">

<div  class="col">
Picture B
</div><div class="col">
Text B
</div>

</div>

<div id="msg">
</div>
</div>

CSS

.multicol .col {
  display:inline-block;
  width: 50%;
  background-color: rgb(200,200,200);
  direction:ltr;
  margin-bottom:10px;
}

.multicol.swop {
  direction:rtl;
}

@media (max-width: 600px) {
  .multicol .col {
    width:100%;
  }
  #msg:before {
  content:"On mobile single column content, pic followed by text"
  }
}

#msg:before {
  content:"On desktop two alternating content, try shrinking window!"
}