0

I have the following order of cols in Bootstrap in desktop screen:

COL-A COL-B COL-C 

<div class"container">
  <div class="row">
    <div class="col-lg-4 col-md-4">Text 1</div>
    <div class="col-lg-4 col-md-4"><img src="myimage"></div>
    <div class="col-lg-4 col-md-4">Text 2</div>    
  </div>
</div>

When I change my screen to medium size (min width: 768px to 990px), I want to achieve the next:

enter image description here

Thanks in advance for your help.

cabita
  • 832
  • 2
  • 12
  • 36

1 Answers1

0

If I'm understanding your diagram, just do two columns of half-width, with the 2nd column having two rows within it containing full width columns.

Something like:

<div class="row">
    <div class="col-sm-6">Column 1</div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col">Column 2</div>
        </div>
        <div class="row">
            <div class="col">Column 3</div>
        </div>
    </div>
</div>

The sm breakpoints and width numbers should be optional if you're only doing these.

UpQuark
  • 791
  • 1
  • 11
  • 35