Expand Non-consecutive Content Blocks To Sidebar on XL Screens Without Duplicating Source Code Blocks

Question

I'm just not sure how to do what I'm trying to achieve.

Pre-Context

sheriffderek's answer below seems like a good attempt at solving this with css grid. A downside to this approach is that when content is added to the profile block on XL screens, it affects the other cells in that row causing large white space. Yes, one could just add more rows to the grid-template-areas layout, but my content will be variable height so this solution seems like it may cause unexpected whitespace depending on the content.
Given my constraint of not duplicating code blocks, I'm beginning to think this is not solvable with purely Bootstrap 4 and CSS.
I have many years of CSS / HTML. I'm no beginner by any stretch. I don't want to have discussions about what my learning journey "should" be. I'm using Bootstrap 4 for several reasons important to me. I would ask that an answerer focus on this question's specific requirements.

Relevant Context

I'm using Bootstrap 4. I would prefer a pure Bootstrap 4 solution (if possible). Flex classes from Bootstrap 4 OK. At this point, I'd use straight CSS and flexbox if it did what I wanted.
I have a fixed left sidebar. I will hide this on small screens. The left sidebar is not the focus of this question; the focus is on the middle and right columns when screen widths between 768 and greater.
On screen widths between 768 (md min) - 1199 (lg max), a content block ("Cards Lower Sidebar") sits between a search bar content block (top) and a main content area (below). When the screen size scales to 1200px (xl) or larger, I want the "Cards Lower Sidebar" block to pop out to the right sidebar.
On screen widths between 768 (md min) - 1199 (lg max), a profile content block sits below the "Main content area". When the screen scales to 1200px (xl) or larger, I want this content block to pop out to the right sidebar above the "Cards Lower Sidebar".
My requirement is, I cannot repeat the HTML source code blocks twice. Ex: duplicate the profile block twice in the source and display none for one or the other depending on the screen size with media queries.

Figure 1

In the below image, the "Cards Lower Sidebar" sits between the search box area and the "Main Content Area". When the screen transitions to xl (1200px), the "Cards Lower Sidebar" content block pops out to to become a lower-right sidebar area. The search box and the Main Content Area stay where they are.

The profile area pops out to become the top-right sidebar area.

I don't even know if this is possible.

Before (lg screens)

After (xl screens)

I don't want to muddle this question with the many wrong things I've tried. I've tried a lot.

Here's minimal example code:

html {
    height: 100%;
}
body {
    min-height: 100%;
    padding-top: 56px;
}

.sidebar {
    display: none;
}

@media (min-width: 768px) {
    .main {
        padding-left: 370px;
    }

    .sidebar {
        position: fixed;
        width: 350px;
        top: 56px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

#profile-img {
    width: 150px;
    height: 150px;
    background-color: #c9c9c9;
}



    
        
        
        Responsive Scalable Layout
        
        
    
    
        
        
            Navbar
            
            
                
                    
                        Link
                    
                
            
        
        
        
            
                
                    Left Sidebar
                
                
                    
                    
                        
                            
                                
                                    Home
                                
                                
                                    Library
                                
                                Data
                            
                        
                    
                    
                    
                        
                            
                            
                                
                            
                        
                    
                    
                    
                        
                            
                                Card title
                                Card subtitle
                                Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                
                                Card link
                                Another link
                            
                        
                        
                            
                                Card title
                                Card subtitle
                                Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                
                                Card link
                                Another link
                            
                        
                    
                    
                    
                        
                            Main Content
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut
                                debitis ipsa maiores molestiae qui suscipit vitae? Accusamus consequatur consequuntur
                                corporis cumque delectus, deserunt dolor doloremque dolorum eaque enim esse facere
                                facilis illo impedit incidunt ipsa laborum molestiae natus nihil praesentium quia quis
                                quo repellat repudiandae, rerum suscipit tempore totam velit voluptatem voluptatum?
                                Accusamus alias aliquam aperiam consectetur doloremque iste labore recusandae sed.
                                Accusamus accusantium ad beatae cumque deserunt eaque hic ipsum laudantium, magni
                                minima odit quas quos tempore tenetur voluptas. A, adipisci autem deserunt ducimus est
                                facilis fugiat itaque iusto minus, nam, nobis quas rerum sint totam voluptatum?
                            
                        
                    
                    
                    
                        
                            
                            
                                Profile

Note: I posted a similar question a while ago but I answered my own question and my own answer is inferior. Long story short, I can't repeat a content block twice in Django (throws duplicate tag error inside template). Hence, I'd like to find a solution for this that doesn't duplicate the same code blocks twice in the HTML.

UPDATE

Humbly and respectfully, the answers below:

fail when realistic content is inputted into the content blocks (ex: main content can contain short content or long-form content)
suggest CSS grid, but don't address the gap between the profile area and the cards on XL screens.

Case-in-point:

Update FINAL:

@focus.style provided the most complete and innovative answer that resolves the requirements of this question. Special thanks to @sherrifdereck and all too as it has motivated me to dig deeper into responsive CSS design.

user_1399456 · Answer

The first thing I would do - is just determine the pieces.

(I fought it for a long time... but CSS grid is MAGIC!)

and

So, that you can be sure that the sections don't conflict. Now, what you have here (might) be possible with some wild trickery and margin magic... - but probably not / so, this is the time where CSS grid comes to the rescue. This is what it was made for!

part one: https://codepen.io/sheriffderek/pen/8e7bf2469b0cd16515f1278fa0519eea?editors=1100

you should probably do something at the medium break-point too...

part two: https://codepen.io/sheriffderek/pen/3d57b839cf62d00b4bdc46af698218ca?editors=1100

part three: https://codepen.io/sheriffderek/pen/215e14b16e1a8af05bce4ab236dab465


    
        app header / nav-bar
    



    sidebar



    bread-crumbs and search



    cards



    main stuffs



    profile stuff

.

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

header {
    border: 5px solid lightblue;
    padding: 10px;
}

.sidebar {
    border: 5px solid #ff0066;
    padding: 10px;
}

.actions {
    border: 5px solid lime;
    padding: 10px;
}

.cards {
    border: 5px solid orange;
    padding: 10px;
}

main {
    border: 5px solid yellow;
    padding: 10px;
}

.profile {
    border: 5px solid black;
    padding: 10px;
}

/* with flex-box... you COULD reorder these a bit on small screens if you wanted */


/* your 'medium' size */
@media (min-width: 600px) {

}

/* your 'large' size */
@media (min-width: 900px) {
    
    body { /* look! it's like a little drawing of the layout!" */
        display: grid;
        grid-template-areas: 
            "header header header"
            "sidebar  actions  actions"
            "sidebar  cards    cards"
            "sidebar  main     main"
            "sidebar profile  profile";
    }

    header {
        grid-area: header; /* note! no quotes " " */
    }

    .sidebar {
        grid-area: sidebar;
    }

    .actions {
        grid-area: actions;
    }

    .cards {
        grid-area: cards;
    }

    main {
        grid-area: main;
    }

    .profile {
        grid-area: profile;
    }
}

/* your 'extra-large' size */
@media (min-width: 1300px) {
    body { /* look! it's another drawing of the layout!" */
        display: grid;
        grid-template-areas: 
            "header   header   header  header"
            "sidebar  actions  actions profile"
            "sidebar   main     main   cards"
            "sidebar   main     main   cards";
    }
}

Crazy! Right!???

Note: keep in mind that there are many more concerns and that this is the happy-path example for sure. You might have a max-width on the content parent - and things might change based on what you place in each area - but this should get you going.

user_3187127 · Answer

This is the example of how is it possible to solve this task using 99% Bootstrap (had to add one extra class .break anyway). I've done it because was although curious if BS could handle it.

html {
  height: 100%;
}

body {
  height: 100%;
}

.break {
  flex-basis: 100%;
  width: 0;
}





Navbar

  Fixed
  
  Search
  Cards Lower Sidebar
  Main Content Area
  User

Or on Codepan, to see it in dynamics.

UPDATED

I've tested all the answers and indeed there is no plain CSS solution for this task. But! As log as you are using Bootstrap 4 - I don't see any obstacles for using jQuery a bit. Here you go. A bulletproof answer, now works as it should. And not s single additional CSS was given that day.

transferBlocks(); // calling function

window.addEventListener('resize', () => {
  transferBlocks(); // calling function on resize
});

function transferBlocks() {
  if ($(window).width() < 992) { /* checking for bootstrap LG breakpoint */
    // placing #cardsLowerSidebar and #user in center column
    $('#search').after($('#cardsLowerSidebar'));
    $('#mainContentArea').after($('#user'));
  } else {
    // placing #cardsLowerSidebar and #user in right column
    $('#colRight').append($('#user'));
    $('#colRight').append($('#cardsLowerSidebar'));
  }
}



 


  Navbar
  
    Fixed
    
      Search
      Cards Lower Sidebar
      Main Content Area Main Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content Area
      User
Subuser

Or on Codepan, to see it in dynamics.

UPDATED 2

Combination of Bootstrap and display: grid, free form JS. It can be useful too.

For screens more than 992 px width lets imagine that we have grid 2 columns and 24 rows.

The first column consists of #search with grid-row: 1 / span 1; (starts from the gap #1 and spans 1 row) and #mainContentArea with grid-row: 2 / span 23; (starts from the gap #2 and spans 23 row). 1+23=24 rows.

The second column consists of #user with grid-row: 1 / span 2; (starts from the gap #1 and spans 2 row, to be higher than #search) and #cardsLowerSidebar with grid-row: 3 / span 22; (starts from the gap #3 and spans 22 row, because the #user spans 2 rows unlike #search). 2+22=24 rows.

24 rows is not a constant, can use other values. In here it requires to set #cardsLowerSidebar and #mainContentArea as high as gossible.

More about Grid Row.

.d-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: auto;
}

#search {
  order: 1;
  grid-row: 1 / span 1;
}

#cardsLowerSidebar {
  order: 4;
  grid-row: 3 / span 22;
}

#mainContentArea {
  order: 2;
  grid-row: 2 / span 23;
}

#user {
  order: 3;
  grid-row: 1 / span 2;
}

@media (max-width: 991.99px) {
  .d-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto auto 1fr auto;
  }
  #search {
    order: 1;
    grid-row: auto;
  }
  #cardsLowerSidebar {
    order: 2;
    grid-row: auto;
  }
  #mainContentArea {
    order: 3;
    grid-row: auto;
  }
  #user {
    order: 4;
    grid-row: auto;
  }
}






  Navbar
  
    Fixed
    
      Search
      Cards Lower Sidebar
      Main Content Area Main Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content
        AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain
        Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content
        AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain Content AreaMain
        Content AreaMain Content AreaMain Content AreaMain Content Area
      User
Subuser

user_6268914 · Answer

@sheriffderek's answer is a very good overall solution. However, you could simplify it slightly to mix flexbox and grid. This would allow you to continue using Bootstrap for some of the layout.

The problem with Bootstrap

I doubt you're going to find a full Bootstrap 4 solution. The problem is, Bootstrap is NOT utilizing CSS Grid for layouts. If you create a Grid with Bootstrap, the Grid functionality is simply being faked using nested flex elements.

Here's how I'd approach this.

Flexbox + Grid

Layout the primary portions of the page using traditional layout rules and flexbox. I'd leave the header out of this completely since it doesn't move/change and the default is display:block which pushes other content down as needed.

------------------------------------------------------------------
|                     header (display block)                     |
------------------------------------------------------------------
|                       |                                        |
|                       |                                        |
|      nav (flex)       |                 content (flex)         |
|                       |                                        |
------------------------------------------------------------------

Note: You can use Bootstrap for this part if you want but I'm going to simply use display:flex in my examples as it's easier to write and easier for others to follow later.

header {
  background-color: lightGray;
  padding: 10px;
  text-align: center;
}

#mainContent {
  display:flex;
}

nav {
  background-color: aqua;
  padding: 10px;
  text-align: center;
  flex-basis: 33.3333%;
  min-height: 100px;
}
#content {
  background-color: tan;
  padding: 10px;
  text-align: center;
  flex-basis: 66.6666%;
}

Header Content

  Nav Bar
  Content

Displaying content normally

You don't need any fancy grid or flexbox stuff for the normal display. Block elements push everything else down by default and that's what you've mocked up.

header {
  background-color: lightGray;
  padding: 10px;
  text-align: center;
}

header {
  background-color: lightGray;
  padding: 10px;
  text-align: center;
}

#mainContent {
  display:flex;
}

nav {
  background-color: aqua;
  padding: 10px;
  text-align: center;
  flex-basis: 33.3333%;
  min-height: 100px;
}
#content {
  background-color: tan;
  padding: 5px 10px;
  text-align: center;
  flex-basis: 66.6666%;
}

.search, .cards, .content, .profile {
    background: rgba(0,0,0,0.2);
    padding: 10px;
    margin: 5px 0;
}

Header Content

  Nav Bar
  
      Search
      Cards
      Main Content
      Profile

Giant Screens

This is where you use Media Queries to apply CSS Grid to override the block level layouts.

header {
        background-color: lightGray;
        padding: 10px;
        text-align: center;
    }
    
    #mainContent {
        display: flex;
    }
    
    nav {
        background-color: aqua;
        padding: 10px;
        text-align: center;
        flex-basis: 33.3333%;
        min-height: 100px;
    }
    
    #content {
        background-color: tan;
        padding: 5px 10px;
        text-align: center;
        flex-basis: 66.6666%;
    }
    
    .search,
    .cards,
    .content,
    .profile {
        background: rgba(0, 0, 0, 0.2);
        padding: 10px;
        margin: 5px 0;
    }

    @media screen {
        /* normally you would have sizes here but we're just showing the media query effect */
        #content {
            padding: 5px;
            display: grid;
            grid-template-areas: "search profile"
                                 "content profile" 
                                 "content cards"
                                 "content cards";
        }
        .search,
        .cards,
        .content,
        .profile {
            margin: 5px;
        }
    }

Header Content

    Nav Bar
    
        Search
        Cards
        Main Content
        Profile

If you want to change the sizes explicitly you can either use Grid's sizing system or update the grid-template-areas with multiple of the same-named rows/columns.

user_3265535 · Answer

I tried simple flexbox property, i re-used html structure from @sheriffderek It's just an idea and help to explore other possibilities.

Drawback: Any contents outside this container will be placed behind the main content. basically i'm setting fixed height to bring the profile & cards to the top. you can detect the height of the main content and empty space next to the container using a line of js.


    
        app header / nav-bar
    


    
        Sidebar
    
    
        
            bread-crumbs and search
        

        
            cards
        

        
            main stuffs
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id varius felis. Sed id lobortis nibh. Donec non magna porttitor, scelerisque turpis ut, egestas ipsum. Proin sodales posuere sapien ut vulputate. Integer libero nunc, vulputate et sem a, ultrices sodales nunc. Mauris lorem turpis, cursus at posuere a, tristique vitae tellus. Morbi convallis vulputate quam eget tristique.

In a nisi in mauris cursus bibendum a in ligula. Curabitur cursus vitae est pellentesque euismod. Pellentesque elementum quis dolor at pretium. Suspendisse ullamcorper dolor eu maximus maximus. Pellentesque congue convallis justo, eu faucibus tellus tincidunt id. Vestibulum suscipit felis quis augue rutrum dictum. Maecenas gravida mi felis, vel tincidunt nisi ornare id. Proin posuere enim eu lorem scelerisque, eget viverra quam lacinia. Praesent varius pellentesque volutpat. Aliquam dui velit, eleifend et ipsum aliquet, malesuada feugiat arcu. Ut id tincidunt ipsum. Suspendisse eu lorem molestie dui cursus fermentum quis non justo. Praesent consequat lorem metus, eu aliquam quam tempor sit amet. Vivamus hendrerit est vulputate sapien lacinia imperdiet. Donec congue ultrices libero, sed pellentesque magna faucibus vitae.

Sed varius dictum enim ut euismod. Suspendisse eu est massa. Morbi commodo nisi quis orci faucibus viverra. Pellentesque a metus venenatis, congue sapien in, interdum libero. Suspendisse suscipit orci enim, sit amet blandit ipsum sollicitudin ac. Nulla facilisi. Curabitur pretium eu quam sed tincidunt.

Aliquam lectus arcu, pellentesque ac mauris eu, faucibus luctus tellus. Aliquam mollis aliquam urna et feugiat. Nunc placerat lorem odio, nec pulvinar nunc euismod ut. Nunc sodales cursus metus, et blandit enim semper vel. Proin at urna ultricies, pharetra metus vitae, maximus urna. Phasellus id ullamcorper justo. Morbi vestibulum eleifend ultricies. Donec tincidunt elit ut diam euismod scelerisque. In fringilla in dui nec ultrices. Morbi cursus arcu vitae lorem laoreet ultrices. Donec gravida tempus bibendum. Sed laoreet, augue congue imperdiet consectetur, est dui hendrerit dui, nec aliquet tellus tellus vitae ligula. Vivamus blandit blandit ante, id iaculis libero imperdiet id.

In at dolor sed augue dictum aliquet. Sed sapien mi, tempus quis luctus quis, posuere et orci. Phasellus viverra ipsum mi, sed interdum sem lobortis id. Quisque a quam in dolor pulvinar interdum. Integer eget scelerisque orci. Ut imperdiet condimentum mattis. Fusce non urna eget est tincidunt venenatis commodo tempus nisl. Aliquam gravida, nisi id blandit vehicula, quam ipsum porta magna, sit amet semper nisl augue eget nisl. Fusce scelerisque ligula sapien, quis tristique justo aliquam et. Sed in nunc lacinia, fermentum mauris in, consequat augue. In imperdiet quis erat vel tincidunt. Praesent facilisis rutrum risus in varius. Sed ac efficitur nibh. Fusce commodo finibus urna, eget congue lorem luctus non.

Morbi rutrum tincidunt arcu id blandit. Etiam ac lectus tincidunt, pulvinar sem a, tincidunt est. Quisque vitae rutrum odio. Pellentesque vulputate vitae velit et fringilla. Nam vestibulum nunc est, semper commodo metus tempor faucibus. Maecenas sed tincidunt dolor, a semper ligula. Aliquam maximus nunc ut sapien imperdiet, vitae pharetra nibh fermentum. Aenean et libero eu lacus vestibulum tristique. Donec malesuada eu risus vitae lacinia. Sed sed lacus vitae velit feugiat sodales. Duis in nisi a nulla rutrum congue. Praesent urna justo, bibendum non dui et, ultricies tempus nisl. Donec pulvinar, tortor eget vulputate tempor, metus justo mattis odio, vel interdum urna lorem nec sem. Praesent commodo porta dui eu consequat. Etiam leo nibh, suscipit a augue quis, bibendum vestibulum ipsum.

Phasellus non dui et dui elementum interdum in a odio. In hac habitasse platea dictumst. Morbi id mollis odio, auctor facilisis ante. Donec elementum eget sem id luctus. Proin eleifend lacus purus, non volutpat tortor aliquet at. Integer tempus scelerisque orci sed convallis. Aliquam eget mauris non tortor fermentum commodo id in lectus. Etiam in turpis in ex interdum aliquam eget at tortor. Donec laoreet diam iaculis enim commodo, non elementum ex porta. Suspendisse est elit, lacinia eu eros quis, malesuada lacinia leo. Nam bibendum viverra luctus.

Mauris ultrices elit sed mattis mollis. Suspendisse et metus mauris. Praesent eget erat dui. Cras non congue ligula. Integer nisi sapien, fringilla et mi eget, semper aliquam metus. Aenean tempus nec nibh quis mollis. Donec eu ullamcorper lectus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris rutrum convallis est, scelerisque tincidunt eros laoreet at. Aenean id vehicula elit. Pellentesque nec pharetra tellus, in mollis arcu. Quisque ut tincidunt arcu. In dignissim nisl sed metus bibendum, auctor rutrum lorem consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Pellentesque sagittis risus non dictum hendrerit. Donec in ex et mi blandit facilisis vitae quis libero. Etiam ultrices justo nisi, vel porta mi vehicula in. Mauris luctus purus sed sem tempor faucibus vel vel neque. Duis a neque consectetur, placerat massa eu, tempor orci. Pellentesque lectus leo, laoreet ut interdum et, accumsan in orci. Pellentesque id scelerisque sem. Mauris sapien mi, consequat ac tellus vel, vehicula viverra ligula. 
            
        

        
            profile stuff
            profile stuff
            profile stuff
            profile stuff

And css would be

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

header {
    border: 3px solid lightblue;
    padding: 10px;
}

.sidebar {
    border: 3px solid #ff0066;
    padding: 10px;
}

.actions {
    border: 3px solid lime;
    padding: 10px;
}

.cards {
    border: 3px solid orange;
    padding: 10px;
}

main {
    border: 3px solid yellow;
    padding: 10px;
}

.profile {
    border: 3px solid black;
    padding: 10px;
}

/* with flex-box... you COULD reorder these a bit on small screens if you wanted */


/* your 'medium' size */
@media (min-width: 600px) {

}

/* your 'large' size */
@media (min-width: 900px) {
    .all-stuff{
        display: flex;
        width: 100%;
    }
    .sidebar{
        width: 200px;
    }
    .container{
        display: flex;
        flex-wrap:wrap;
        width: calc( 100vw - 200px );
        align-items: flex-start; 
        flex-direction: column-reverse;
        max-height: 600px;  /* this height doing trick here */
    }
    .container > *{
        width: 200px;
/*     flex: 1; */
    flex-wrap: wrap;
    }
    .actions{
        width: calc( 100vw - 400px );
        order: 4;
    transform: translateX( -200px );
    }
    .container > main{
        height: 500px; /* this height doing trick here */
        width: calc( 100vw - 400px );
/*      flex: 1; */
        order: 3;
    transform: translateX( -200px );
    }
    .profile{
        order: 2;
    transform: translateX( calc( 100vw - 400px ) )
    }
    .cards{
        order: 1;
    transform: translateX( calc( 100vw - 400px ) )
    }
}

/* your 'extra-large' size */
@media (min-width: 1300px) {

}

Expand Non-consecutive Content Blocks To Sidebar on XL Screens Without Duplicating Source Code Blocks

4 Answers

The problem with Bootstrap

Flexbox + Grid

Displaying content normally

Giant Screens