Как я могу получить Bootstrap 4 cols, чтобы быть hortizontal на определенных размерах экрана?

Question

См. Изображение ниже для макетов, которые я пытаюсь получить на экранах разных размеров с Bootstrap 4. При 768 пикселей и шире виджеты боковой панели находятся справа. Меньше, чем 576px, виджеты складываются, как стандартные Bootstrap 4. Но в диапазоне от 576px до 769px, какую комбинацию размеров col или порядка я могу использовать, чтобы виджеты находились рядом?

.widget {
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

.widget3 {
  height: 150px;
  border: 1px solid #000;
  text-align: center;
}

.content {
  border: 1px solid #000;
  text-align: center;
  height: 500px; // fixed height only for this demo
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid col-lg-10">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-sm-12">
      <div class="content">Content</div>
    </div>
    <div class="col-lg-3 col-md-3">
      <div class="widget">Widget 1</div>
      <div class="widget">Widget 2</div>
      <div class="widget3">Widget 3</div>
      <div class="widget">Widget 4</div>
    </div>
  </div>

Answer 1

Попробуйте это

DEMO

<div class="container py-2">
<div class="row">
    <div class="col-md-9 col-sm-12"> Content </div>
    <div class="col-md-3  col-sm-12">
        <div class="row">
            <div class="col-md-12  col-sm-6"> Widget1 </div>
            <div class="col-md-12  col-sm-6"> Widget2 </div>
            <div class="col-md-12  col-sm-6"> Widget3 </div>
            <div class="col-md-12  col-sm-6"> Widget4 </div>
        </div>
    </div>
</div>