-2

I'm working on a webpage where I have a calendar on one side, and on the other side I have a series of divs for collecting various pieces of information. When in desktop view I want them to be like this, for example, where CAL basically spans 3 rows.

CAL DIV1
CAL DIV2
CAL DIV3

I'm currently doing this spanning with another nested bootstrap grid in column 2, which I don't believe can work for what I want, which is for when I respond to a mobile device, I'd like to do this:

DIV1
DIV2
CAL
CAL
CAL
DIV3

I cannot figure out a structure that will allow me to move DIV1 and DIV2 above CAL when on mobile.

Ideally any solution is a bootstrap solution, but even if not, I'd greatly appreciate any pointers that can be given.

Sypher_04
  • 121
  • 11

1 Answers1

0

Despite the fact I searched already before posting my question, I obviously didn't do so quite thorougly enough, or use the right terms. This question: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4 gave me my solution, which I've slightly changed below for my particular example

<div class="container-fluid">
  <div class="row d-flex d-lg-block">
     <div class="col-lg-6 order-2 float-left">
        CAL<br/>
        CAL<br/>
        CAL<br/>
    </div>
    <div class="col-lg-6 order-0 float-right">
        A
    </div>
    <div class="col-lg-6 order-1 float-right">
        B
    </div>
  <div class="col-lg-6 order-3 float-right">
        C
  </div>
</div>
Sypher_04
  • 121
  • 11