how to change positioning of aside and main container

Bootstrap Studio Help
1

Hi. see this part of code:

<aside>
<!-- modules in right position -->
</aside>
<article>
<!-- content -->
</article>

my site is rtl (right to left). with code above "aside" is on the right side and then comes the article in the left side. in mobile view "aside" shows up first and then comes "article". in order to change this order, i did this:

    <article class="float-left">
    <!-- content -->
    </article>
    <aside>
    <!-- modules in right position -->
    </aside>
    <div class="clear"></div>

this way in mobile view the "article" part comes first. this is good seo-wise.

i wanna know that is there a better way to do this in bootstrap 4?

2

As an example, probably start from here. Your seo friendly option.

<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 order-2 order-md-1">
            < article>
                < h1>Article< /h1>
            < /article>
        </div>
        <div class="col-12 col-md-4 order-1 order-md-2">
            < aside>< span>Aside< /span>< /aside>
        </div>
    </div>
</div>

Then if you want to have the Aside appear above the article when in mobile view, you use the Options pane (top/right). You will use the Column Options section, the base Width and the expanded Width options. As well as the Order base and expanded Order options.

First, select the "column" for the Article and set it's Width option to 12, then expand the Width option and set MD to 8. Then for the Order option set it to 2, then expand the Order option and set MD to 1.

Second, select the "column" for the Aside and set it's Width option to 12, then expand the Width option and set MS to 4. Then for the Order option set it to 1, then expand the Order option and set MD to 2.

If you want the Aside to appear to the left hand side then set both the Article and Aside's "columns" MD option back to none.

Saj

3

great. i did this solution on the template. now in mobile view, all the modules in the aside position show up after the main content. but now i want to have 2 kind of aside modules. some of them show up at the top of the page before the main content in mobile view, and some of the show up at the bottom after the main content.

the first idea that comes to mind is that define 2 aside positions. isn't it bad seo-wise?

<aside></aside>
<main></main>
<aside></aside>
4

I don't think you would have 2 asides. Especially when the aside I believe in general is meant to be like a side note or something that is still in reference to the article it is an aside to. https://www.w3schools.com/html/html5_semantic_elements.asp

Are you trying to have split asides in mobile and then combine them into 1 on desktop? Doing something like that would probably be hard to do with flexbox model, probably not at all. But you could manage it using CSS Grid though. You'd just have a media query that when you want to start having the sides combined (and stacked), you convert to using CSS Grid. Technically you'd not really be using flexbox in mobile view simply because in mobile (default) the elements are stack naturally.

HTML

<section class="grid">
  <aside><span>Text</span></aside>
  <main>
    <p>Paragraph</p>
  </main>
  <aside><span>Text</span></aside>
</section>

CSS

@media (min-width: 768px) {
  .grid {
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:3fr 1fr;
    -ms-grid-rows:auto auto;
    grid-template-columns:3fr 1fr;
    grid-template-areas:"content aside1" "content aside2";
  }
}

@media (min-width: 768px) {
  .grid aside:first-child {
    -ms-grid-column:2;
    -ms-grid-row:1;
    background-color:red;
    grid-area:aside1;
  }
}

@media (min-width: 768px) {
  .grid aside:last-child {
    -ms-grid-column:2;
    -ms-grid-row:2;
    background-color:green;
    grid-area:aside2;
  }
}

@media (min-width: 768px) {
  .grid main {
    -ms-grid-column:1;
    -ms-grid-row:1;
    -ms-grid-row-span:2;
    background-color:yellow;
    grid-area:content;
  }
}

Works down to IE10 as well. Well it should anyways according to my IE10 emulation testing.

Saj