使用Bootstrap在小屏幕上将左/右对齐的列移动到中心

Question

I've got a basic header with a logo on the far left and text on the far right (right aligned). As the page gets smaller the text overlaps with the logo and doesn't look great.

Fiddle here:

<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>
</div>

How can I have everything shift to the middle and have my columns be centered on small screens? (logo on top, text underneath) Poured over Bootstrap documentation and can't figure it out with the grid system. If Bootstrap doesn't allow for that kind of re-positioning, is there a way with custom css/media queries?

Answer 1

You could use a combination of col-sm and col-xs to make sure they do not overlap

Fiddle

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-12 col-sm-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>
</div>

As for aligning the text, you could use these media queries : https://github.com/twbs/bootstrap/issues/11292

Alternatively, if you would duplicate the block, you can achieve what you want with hidden-xs and visible-xs , however duplication is not something I would suggest as it reduces maintainability, but I added it to make the answer complete, as it is an option.

See this Fiddle which gives you this code

<div class="container">
  <!-- Hidden only on XS, not centered -->
  <div class="row hidden-xs">
    <div class="col-sm-2">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-sm-10 text-right text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>

  <!-- Only visible on XS, centered-->
  <div class="row visible-xs">
    <div class="col-xs-12 text-center">
      <img src="https://unsplash.it/100/100/?random" class="img-circle" alt="placeholder">
    </div>
    <div class="col-xs-12 text-center text-uppercase">
      <h1>Scooby Doo</h1>
      <h3>Where are you</h3>
    </div>
  </div>
</div>