Change stacking order of block sections. [#2741273]

Hello,
When a breakpoint is reached and the block sections stack one on top of the other, the content section stacks above the two sidebars. Could you let me know how to have it stack the first sidebar on top, then the content, then the second sidebar?
Really I just need to know the file and key variables to work with.
Thanks!

Comments

Comment #1

2 June 2016 at 17:41

StuartL created an issue. See original summary.

Comment #2

leahtard CreditAttribution: leahtard at The Jibe commented 2 June 2016 at 23:47

Hi StuartL,

The first place you want to look is page.html.twig. Move:

      {% if page.sidebar_first|render %}
        <aside id="sidebar-first" class="column sidebar first">
          {{ page.sidebar_first }}
        </aside><!-- /#sidebar-first -->
      {% endif %}

So it sits above:

      <section id="content">

This will completely throw off the way the current grid system is setup. To fix this, take a look at /sass/_layout--grid.sass

Good luck!
Leah

Comment #3

StuartL CreditAttribution: StuartL commented 3 June 2016 at 13:14

Hi Leah,
Thanks so much for the response. That was very helpful. The change you suggested definitely helps when it is in 'mobile mode' and puts the first sidebar on top of the content section. Like you said, it throws things off, though. When in 'wide mode', the sidebar doesn't display at all. I have tried playing around with this section of code in the grid layout sass file with no luck. Do you have any suggestions?

.two-sidebars &
    // 100% width for mobile devices.
    @include fill-parent
    // Same logic for tablets.
    @include media($medium-screen-up)
      @include span-columns(4)
      @include shift(2)
    // Span this div 7 columns wide.
    @include media($large-screen-up)
      @include span-columns(8)
      // Shift it to the right 2 columns to accommodate for the first sidebar.
      @include shift(3)

#sidebar-first
  // 100% width for mobile devices.
  @include fill-parent
  // Similar logic for tablets.
  @include media($medium-screen-up)
    @include span-columns(2)
    @include shift(-6)
    .one-sidebar.sidebar-first &
      @include shift(-8)
  @include media($large-screen-up)
    // Span this div 2 columns wide.
    @include span-columns(3)
    // Shift it to the left 9 columns to place it in the far left column.
    @include shift(-11)
    .one-sidebar.sidebar-first &
      @include shift(-15)

Comment #4

leahtard CreditAttribution: leahtard at The Jibe commented 3 June 2016 at 17:22

I think removing all references to "shift" should fix this for you:

#content
  .no-sidebars &
    // 100% width for small screens.
    @include fill-parent
    // Same logic for medium screens.
    @include media($medium-screen-up)
      @include span-columns(8)
    // Same logic for large screens.
    @include media($large-screen-up)
      @include span-columns(12)

  .one-sidebar.sidebar-second &
    // 100% width for small screens.
    @include fill-parent
    // Span this div 6 columns wide for medium screens.
    @include media($medium-screen-up)
      @include span-columns(6)
    // Span this div 8 columns wide for large screens.
    @include media($large-screen-up)
      @include span-columns(8)

  .one-sidebar.sidebar-first &
    // 100% width for small screens.
    @include fill-parent
    // Span this div 6 columns wide for medium screens.
    @include media($medium-screen-up)
      @include span-columns(6)
      // @include shift(2)
    // Span this div 9 columns wide for large screens.
    @include media($large-screen-up)
      @include span-columns(9)
      // @include shift(3)

  .two-sidebars &
    // 100% width for small screens.
    @include fill-parent
    // Span this div 4 columns wide for medium screens.
    @include media($medium-screen-up)
      @include span-columns(4)
      // @include shift(2)
    // Span this div 5 columns wide for large screens.
    @include media($large-screen-up)
      @include span-columns(5)
      // @include shift(3)

#sidebar-first
  // 100% width for small screens.
  @include fill-parent
  // Span this div 2 columns wide for medium screens.
  @include media($medium-screen-up)
    @include span-columns(2)
    // Shift it to the left to place it in the far left column. Different shift for two-sidebar and one-sidebar layout.
    // @include shift(-6)
    .one-sidebar.sidebar-first &
      // @include shift(-8)
  @include media($large-screen-up)
    // Span this div 3 columns wide for large screens.
    @include span-columns(3)
    // Shift it to the left to place it in the far left column. Different shift for two-sidebar and one-sidebar layout.
    // @include shift(-8)
    .one-sidebar.sidebar-first &
      // @include shift(-12)

#sidebar-second
  // 100% width for small screens.
  @include fill-parent
  // Span this div 2 columns wide for medium screens.
  @include media($medium-screen-up)
    @include span-columns(2)
    // @include shift(0)
  @include media($large-screen-up)
    // Span this div 4 columns wide for large screens.
    @include span-columns(4)
    // @include shift(0)

Comment #5

leahtard CreditAttribution: leahtard at The Jibe commented 3 June 2016 at 17:25

Just noticed that I was testing my code from the dev branch where we have recently gone back to a 12 columns grid. So don't copy the code I pasted above. Simply remove all instances of "@include shift" from /sass/_layout--grid.sass. That should do it.

Cheers, Leah