0

I am currently working on a landing page that uses bootstrap's grid system for positioning and the desktop view has the layout looking something like:

|h1|--------------------|p|

|Button|

The mobile view has it looking like:

|h1|

|p|

|button|

Because of the grid, the h1 and button are in 1 div and the P is in it's own div.

The easy solution would be to just have hidden divs based on the breakpoints, but I'm trying to avoid this. I've tried using the order class to move things around with other elements on the page, but seeing as the parent s are the 2 objects in the grid and not their children, this doesn't work. I could also do this with JS, but I would also like to avoid doing this. 

<section class="test">
        <div class="container">
            <div class="test--content row justify-content-lg-center text-lg-left">
                <div class="test--cta col-12 col-lg-5">
                    <h1>Headline</h1>
                    <div class="button main">CTA</div>
                </div>
                <div class="contact--text col-12 col-lg-5">
                    <p>Content</p>
                </div>
            </div>
        </div>
    </section>

As I mentioned, the solution with CSS and JS are pretty clear, but as I've barely used Bootstrap, I am curious to know if this is possible without using the above mentioned solutions or if there was a way to do this with Bootstrap.

jimjamjosh
  • 15
  • 5
  • the bootstrap order class must be added on both columns. where the first col has order-2 the second col must have order-1 class. also look at this may can helps you https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4 – Sim1-81 Oct 15 '19 at 15:01
  • @Sim1-81 exactly. This is why I feel the order solution might not be the best one for this particular instance. I just wanted to double check to see if there were other solutions apart from hidden divs and DOM manupulation. – jimjamjosh Oct 15 '19 at 15:06
  • without bootstrap is hardest, the simpliest way is using the bootstrap 4.x grid system (CSS), otherwhise you have to do that using Javascript or jQuery, another solution could be to check the device with PHP to send a different HTML output – Sim1-81 Oct 15 '19 at 15:19

0 Answers0