asked on

Bootstrap Column Stack for xs

Please look at http://rkassoc.org/Lakos_config/base_template.php. This is precisely what I want. However, as it gets narrower, it stacks the columns in an odd way. See attached, it looks like it breaks on the image boundaries, not the column boundaries. Attached is "narrow" view & source.

What I want is in the narrow (xs) view, the columns with the circled numbers & connecting lines to stack vertically.

How can I do this?

Is this partially caused by my own css to force no column padding?

Thanks
base_template.php
narrow.jpg

Rob

See here for a demo: http://jsbin.com/neyosakoyu/edit?html,output

I"ve also rotated the line image 90deg for when it is in "xs" mode

Essentially I've added a section for what is visible at "xs" and for larger screens.

    <div class="container-fluid">
      <div class="row">
        <div class="hidden-xs">
          <div class="col-sm-6 col-xs-6 text-right nopadding"><img src="http://rkassoc.org/Lakos_config/images/1_blue.png"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"><img src="http://rkassoc.org/Lakos_config/images/2_blue.png"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"><img src="http://rkassoc.org/Lakos_config/images/3_blue.png"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"></div>
          <div class="col-sm-6 col-xs-6 nopadding"><img src="http://rkassoc.org/Lakos_config/images/4_blue.png"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"><img src="http://rkassoc.org/Lakos_config/images/5_blue.png"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"><img src="http://rkassoc.org/Lakos_config/images/6_blue.png">
          </div>
        </div>
        <div class="visible-xs">
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/1_blue.png"></div>

          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/2_blue.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/3_blue.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/4_blue.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/5_blue.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/line_60.png"></div>
          <div class="nopadding"><img src="http://rkassoc.org/Lakos_config/images/6_blue.png"></div>


        </div>
      </div>
    </div>

Open in new window

CSS

.hidden-xs .nopadding {
  padding: 0 !important;
  margin: 0 !important;
}
.visible-xs .nopadding {
  padding: 5px !important;
  margin: 0 !important;
  text-align: center;  
}
.visible-xs img[src*=line] {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

Open in new window

Richard Korts

ASKER

Rob,

Thanks for your response.

Your solution gives the attached called rob.jpg

What I want is like the attached stacked.jpg. Ignore the shading imperfections. Either that or with the line before the 4 or BEST, the line between 3 & 4 removed.. But I can live with the line. I don;t want to have to get into specialized if - then - else depending upon device width.

Thanks

Thanks.
rob.jpg
stacked.jpg

Richard Korts

ASKER

Rob,

You can view my version at rkassoc.org/Lakos_config/base_template_rob.php

Thanks

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Korts

ASKER

Rob,

I must be doing something wrong, I get the attached at wide & narrow widths.

This is in Firefox, http://rkassoc.org/Lakos_config/base_template_rob.php

But lets forget it, I am going with the approach as manifested in the other question about the font sizes.
rob_large_size.jpg
rob_narrow_size.jpg

Richard Korts

ASKER

Thanks for your efforts!