Question: Hi can you help me to set columns in my code? I have this code:

```
<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="flex-column h-100">side menu</div>
        <div class="???">
            <div>1 piece</div>
            <div>2 pieces piece</div>
            <div>1 piece</div>
        <div/>
    <div/>
<div/>

```

here is my actual result, where I've draw how I need split rest of space. Blue column with menu should have fixed with, what actually do. Columns in ratio 1:2:1 could be adjustable.

[![enter image description here](https://i.stack.imgur.com/o9ydY.png)](https://i.stack.imgur.com/o9ydY.png)

Answer: 
Instead of `row` you can use `d-flex` as a `row` can *wrap* - the content can drop *below* the sidebar.

And for the content, you can use this if you have to preserve the html structure:

```
<div class="d-flex w-100">
  <div class="col-3">1 piece</div>
  <div class="col-6">2 pieces piece</div>
  <div class="col-3">1 piece</div>
</div>

```

See demo below - added borders for illustration:

```css
html,body {
  height: 100%;
}
div {
  border: 1px solid;
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid h-100">
  <div class="d-flex h-100">
    <div class="flex-column h-100">side menu</div>
    <div class="d-flex w-100">
      <div class="col-3">1 piece</div>
      <div class="col-6">2 pieces piece</div>
      <div class="col-3">1 piece</div>
    </div>
  </div>
</div>
```
With Bootstrap v4 Flexbox:

```
<div class="d-flex flex-row h-100">
    <div class="d-flex justify-content-start">side menu</div>
    <div class="d-flex flex-row w-100">
        <div class="w-25">1 piece</div>
        <div class="w-50">2 pieces piece</div>
        <div class="w-25">1 piece</div>
    </div>
</div>

```