Ordering fluid and fixed containers

Probably an odd question but does anyone know of a way in Bootstrap 4 to re-order containers and not just columns.

I can reorder like this

<div class="container">
  <div class="row">
    <div class="col order-2">Place first show second</div>
    <div class="col order-1">Place second show first</div>
  </div>
</div>

But what if I want a combo of fixed and fluid on the same layout like this, and it does not work :frowning:

<div class="container order-2">
  <div class="row">
    <div class="col">Placed first show second</div>
  </div>
</div>
<div class="container-fluid order-1">
  <div class="row">
    <div class="col">Place second show first</div>
  </div>
</div>

Hi Paul, what’s the point of using order class on a container? What’s the desired result?
The order class is only used for flex items, i.e. what the columns are.

In position 1 at the very top of my page I have a header with a logo and a phone number and a whole bunch of social media icons.

In position 2 under that I have my navigation which is quite a large nav area code wise with access to about 50 pages in total, some images in there etc.

In position 3 under the nav I have a slideshow with some images.

All 3 of these items are in a fluid container

Then I have a fixed container with position 4 my heading and text and content of my page

Then right at the very bottom of all that I have my footer elements, again quite a large footer with many linked pages, social media, a form, etc.

So now I am trying to test something that is probably not going to work anyway, but in my opinion worth a try, SEO wise I would like my H1 heading and body content first, then my H2 and its content, then I want my header stuff and then my footer stuff.

If I look at my website through googles cache text only view, i have to scroll down 3 pages just to get to body content which is the most important thing i want indexed.

If I look at my site through various SEO tools it is moaning about the text to code ratio, in code view i probably have 50 lines of actual content and about 2000 lines of code, so trying to get this all a little better for a test.

I have 2 options here, either i need to adjust the order of a container or make a col in a fixed container become fluid.
Any chance you have any idea how i could possibly do this. Even though I do not think changing the order is going to help my Google positioning.

But the order class is used to just change the order of columns on different screen sizes.
Example: on desktop you show column1 on the left and column2 on the right - by default on mobile view column1 will go first.
So with the order class you can tell the column2 to show first.
Not sure what SEO has to do with this :slight_smile:

But again, the order class is used on flex items only.

In my pages source code and what a Google spider would see would be

body
H1
Paragraph of content
Header
Nav
Slideshow
Footer

The visitor would see
body
Header
Nav
Slideshow
H1
Paragraph of content
Footer

This way it will still look the same to the viewer looking at the site from a design perspective but to a crawler they will look at the most important aspects of my website first the URL, Title, Description, H1, Paragraphs of content, and then all the less important elements.

https://www.africacollection.com/ this is my normal page without trying to trick any google spiders
http://preview.afrihost.com/154.0.167.225/http://www.africacollectionbs4.com/ this is a preview on a proxy server of me trying to reorder items.

If you look at the source code for both of these pages they are quite different as far as ordering is concerned.

Here is the Google cache of the normal site

Which you will see the order that Googles spider has indexed the elements of the page.

I think you are just totally confusing the things related to order class. Please check the documentation here: Flex · Bootstrap

Change the visual order of specific flex items

I know I am not using the order class for what it was “intended” to be used for, I just found a secondary use for it that I am attempting something even I feel is unlikely to assist with SEO, but you never know till you try. Lol

It is working as I want it to work right now, just was hoping there was a way to make a fluid container within the page without it breaking the order, but for testing this is not a deal breaker. Going to try test this out and see what happens anyways.

Well, as a conclusion - as it seen in bs4 docs the order class is meant to be used on columns :slight_smile:
Whatever you try with containers is not supposed be used like that.

1 Like

@psweb: Paul, I partially agree with what you are wanting to do, I try much the same when I create my documents. The thing is, although the H1 and content is very important for SEO, so is the navbar because that is where the links to other pages come from.

Unsurprisingly, my documents have much the same structure as yours and I tend to use the ordering so that the main content comes before sidebars etc. (i.e. columns). Semantics will help SEO to decipher what is what.

Don’t forget that the title and meta description is is used for the description in the listing.

1 Like

You need to have a flex container to use the order, so your example should become

<div class="d-flex flex-column">
  <div class="container order-2">
    <div class="row">
      <div class="col">Placed first show second</div>
    </div>
  </div>
  <div class="container-fluid order-1">
    <div class="row">
      <div class="col">Place second show first</div>
    </div>
  </div>
</div>

Only problem is that Wappler probably won’t recognize this structure.

1 Like

@patrick, thank you, exactly what I was looking for.
What I would give to live in your head for a few days. :nerd_face:

You are correct that Wappler does not like this structure, but only in the App Structure panel, I tend to break my App Structure panel quite quickly though on all new documents I create, it does not cause too much trouble because in design view it always looks and renders perfectly and i can still access the items through that.

The only trouble this causes me is that the properties panel under the App Structure panel shows very limited properties as soon as I break the App Structure, which i find strange because I am not selecting the element from the App Structure but from the design view?