I tried to coding very simple layout per below screenshot. However I got wrong display on mobile.Please see my codepen here https://codepen.io/oroooat/pen/Yzqarbz. Is there a simple solution for this.

 <div class="container">
    <div class="row">
      <div class="col-xs-12 col-lg-6 col-xl-6 w-100 my-md-3 pl-md-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div>
      <div class="col-xs-12 col-lg-6 col-xl-6 w-100 my-md-3 pl-md-3">
        <img src="https://via.placeholder.com/250x250.png?text=Pic" class="img-thumbnail">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-lg-6 col-xl-6 w-100 my-md-3 pl-md-3">
        <img src="https://via.placeholder.com/250x250.png?text=Pic" class="img-thumbnail">
      </div>
      <div class="col-xs-12 col-lg-6 col-xl-6 w-100 my-md-3 pl-md-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
r/webdev - Tried to archive two column simple layout

Mockup – Desktop

Mockup – Mobile



Source link

Write A Comment