reflow content when column changes size

Question

Need a little help. I have been struggling with this one for a couple of days.

I am toggling columns using the method I found below below.

Bootstrap toggle left column in a two column row

In my larger column (Col1) that shrinks when I expose the right column (col2), I would like my two columns (col1, col1 and col1, col2) to adjust to single column. I am beating my head against the wall trying to figure this out. I am sure it is something painfully obvious that I will feel silly when someone show the solution.

<div class="container-fluid">
  <div class="row">
    <div id="list-col" class="col-xs-12">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-6 item">
          Col1, col1
          </div>
          <div class="col-xs-6 item">
          Col1, col2
          </div>
        </div>
      </div>
    </div>
    <div id="map-col" class="col-xs-0">COL 2</div>
  </div>
</div>

https://jsfiddle.net/td234/qu7j21pm/1/

Thanks for any and all help!

Thom

If I understand your question correctly you are looking for something like this? https://jsfiddle.net/zapuew54/ — Justin Ober, Mar 29 '16 at 16:02
YES, exactly. Sometimes you can't see the forest for the trees. THANKS! — Thom, Mar 29 '16 at 20:22

score 1 · Accepted Answer · answered Mar 30 '16 at 02:33

1

Just need to toggle the classes on the col-xs-6 columns to be col-xs-12.

$('.item').toggleClass('col-xs-12 col-xs-6');

answered Mar 30 '16 at 02:33

Justin Ober

839
6
14

reflow content when column changes size

1 Answers1