Stacking and Source Ordering

[martinsmith]

Hi there! Not sure if this is possible....

In my HTML I have a sidebar and a main content area (in that order). When I get below 768 and in a single column view, I would like the sidebar to stack below the main content.

Thanks

[abass]

Keep in mind how HTML and responsive design works. Whatever order is listed is going to be the order that it will appear when stacked. To execute this how you want to, in your HTML swap the sidebar and main content area.

Now it'll stack properly, right? But the problem is that they are not in the desired order in desktop view. In Jeet, simply give the main content area (call it an article) a col(2/3) and a shift(1/3) - so it is 66.66% wide and you are shifting it to the right 33.33%. Then simply give the sidebar (aside) a col(1/3) and a shift(-2/3) - so the sidebar is 33.33% wide and you are shifting it to the left 66.66%. This should swap the two visually on desktop and then it will of course stack properly in mobile view (make sure you unshift() upon hitting mobile view though) due to the HTML ordering.

Here is it written out:

HTML:

<article>main content area</article>
<aside>sidebar</aside>

CSS (Stylus):

article
  col(2/3)
  shift(1/3)
  +below(768)
    stack()
    unshift()
aside
  col(1/3)
  shift(-2/3)
  +below(768)
    stack()
    unshift()

[corysimmons]

@Flip4Bytes :+1:

[martinsmith]

Star! :)

On 14 Jun 2014, at 09:42, Alex Bass notifications@github.com wrote:

Keep in mind how HTML and responsive design works. Whatever order is listed is going to be the order that it will appear when stacked. To execute this how you want to, in your HTML swap the sidebar and main content area.

Now it'll stack properly, right? But the problem is that they are not in the desired order in desktop view. In Jeet, simply give the main content area (call it an article) a col(-2/3). And then simply give the sidebar (aside) a col(-1/3). This should swap the two visually on desktop and then it will of course stack properly in mobile view due to the HTML ordering.

— Reply to this email directly or view it on GitHub.

[schtauffen]

What if I need the right-rail element to be first on the document? For instance, I have a layout where I want the right-rail to be fixed width and the main article area to be fluid. To achieve this I have:

#main
    width auto
    overflow hidden

#right-rail
    float right
    box-sizing border-box
    width 320px
    padding 10px
    background-color #444
    +below(768px)
        stack()

How do I switch the right rail to stack below the article/main area? Or is it possible to achieve this width behavior with the #main area first?