CODEWITHSUNDEEP
csstwitter-bootstrap
marcp
marcp

Reputation: 1227

Using bootstrap - change a column to a row

I've got a layout which includes a row with 3 columns. Each column has 3 items listed vertically. I'm using Bootstrap. 

  <div class="row">
    <div class="col-sm-4 ">
      <img class="img-responsive" src="http://placekitten.com/g/300/200">
      <h3>SOMETHING</h3>
      <div class="url"> https://something.com </div>
    </div>
    <div class="col-sm-4">
      <img class="img-responsive" src="http://placekitten.com/g/300/200">
      <h3>NOTHING</h3>
      <div class="url"> https://nothing.com/</div>
    </div>
    <div class="col-sm-4 appcontainer">
      <img class="img-responsive" src="http://placekitten.com/g/300/200">
      <h3>EVERYTHING</h3>
      <div class="url"> https://everything.com/</div>
    </div>
  </div>

When the row collapses at 767 px down to about 400 px the layout feels wrong as the individual columns don't fill the space very well. In that case I would like to have it displayed with the image on the left and the header and url on the right as though it were like this..

<div class="col-sm-4 ">
    <div class="row">
        <div class="col-xs-6">
            <img class="img-responsive" src="http://placekitten.com/g/300/200">
        </div>
        <div class="col-xs-6">
          <h3>SOMETHING</h3>
          <div class="url"> https://something.com </div>
        </div>
    </div>
</div>

Can this be accomplished with css and media queries? Or do I have to dig into some javascript?

It fells like I should be able set something up using display, but I haven't found a magic combination that does anything useful.

Upvotes: 1

Views: 50

Answers (1)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

Please check the result:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (max-width: 400px) {
  .col-xs-6 {
    width: 100%;
  }
}

.row {
  margin-top: 15px;
}
<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <img class="img-responsive" src="http://placekitten.com/g/300/200">
        </div>
        <div class="col-xs-6 col-sm-12">
          <h3>SOMETHING</h3>
          <div class="url"> https://something.com </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <img class="img-responsive" src="http://placekitten.com/g/300/200">
        </div>
        <div class="col-xs-6 col-sm-12">
          <h3>NOTHING</h3>
          <div class="url"> https://nothing.com </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <img class="img-responsive" src="http://placekitten.com/g/300/200">
        </div>
        <div class="col-xs-6 col-sm-12">
          <h3>EVERYTHING</h3>
          <div class="url"> https://everything.com </div>
        </div>
      </div>
    </div>
    
  </div>
</div>

Upvotes: 1

Related Questions