Why are bootstrap columns breaking off onto new lines?-CodePudding

Here is my code:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.row {
  width: 100%;
  height: 80%;
  margin: 0px;
  padding: 0px;
}

body {
  background: #EFEFEF;
}

.container-fluid {
  width: 100%;
  height: 80%;
  margin: 0;
  padding: 0px;
  border: 3px solid;
  border-color: #848484
}

.navbar-brand {
  position: absolute;
  margin-top: auto;
  margin-left: 20px
}

#post-container {
  margin-left: auto;
  margin-right: auto;
  border: 3px solid;
  border-color: #FF0000
}

<div >
  <nav > <img  src="images/Ventr_Logo.svg" alt="Ventr Logo" width="100"> </nav>
  <div >
    <div  style="background: #4E4E4E"></div>
    <div  id="post-container">
    </div>
    <div  style="background: #4E4E4E"></div>
  </div>

The light gray column with the red border is the main column. Here is what it looks like when the browser is at the approximate size of a tablet, it is properly maintaining the ratio of 6:3 I want. With the 6 being the size of the main column and 3 being the size of the side columns. This is the image

Now here is the problem: this is what it looks like on a cell phone . The problem is that instead of seeing 3 columns on one line maintaining a ratio of 8:2, like I want it to. Instead, it breaks of onto 3 columns.

How do I solve this issue? By the way, I want the columns to have different sizes depending on the size of the screen.

CodePudding user response：

In bootstrap, "col-sm" starts at 768 pixels. To target small screens, you can use "col-xs" (576 pixels or more) or "col" for even smaller screens.

Just replace "col-sm-2" by "col-2" :

  <div  >
    <div  style="background: #4E4E4E"></div>
    <div  id="post-container">
    </div>
   <div  style="background: #4E4E4E"></div>
</div>