Brett Canfield Brett Canfield - 2 months ago 6
CSS Question

WordPress - Getting my columns to resize automatically using bootstrap

I have a Wordpress template that uses Bootstrap 2.3.1.
I currently have my two areas set up via an SPAN4 and SPAN8.
The resolution is locked at 1170px, therefore the

lg
component of Bootstrap is not needed to be configured.

I would like some help with the areas shown in red, as to how to configure my nested columns, so they work properly. They are within an area already defined as Span 8, so in effect, it is an 8 wide grid that needs to be configured to show 3 columns on medium devices, 2 columns on small devices and 1 column on the extra small devices.

I am relatively new to CSS, but have some understanding of basic coding, it's just doing my head in at the moment.
The attached picture show what I am after
My Wordpress layout

I can't seem to get any bootstrap to work with the sizes I would like to display.

Answer

I suggest you to use bootstrap version 3

http://getbootstrap.com/css/#grid-responsive-resets

unlike version 2, it has classes like col-lg-* col-md-* col-sm-* col-xs-*, which can get your job done more easily.

trying to understanding your problem.

enter image description here

try the demo code below to see if it's the layout you want

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css">
<style>
  .b {
    border: 1px solid #333;
  }
</style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-xs-4">aside</div>
    <div class="col-xs-8">
      main
      <div class="row">
        <div class="col-md-4 col-sm-6">
          <div class="b">
            <h3>.col-md-4.col-sm-6</h3>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="b">
            <h3>.col-md-4.col-sm-6</h3>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="b">
            <h3>.col-md-4.col-sm-6</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>