Reorder columns when used with "right" section index

By default, columns are read from left to right. This means a content item in the last (right-most) column will be read LAST. If the content item in the last column should be read FIRST you need to take additional actions. This page serves an example of this concept.

To achieve this column arrangement,

  1. Create a new 2-column grid container
  2. Set the column widths for Desktop
    1. Column 1 to 25% (col-md-3)
    2. Column 2 to 75% (col-md-9)
  3. Navigate to the Custom classes tab
    1. In the Column 1 field, enter order-md-last
    2. In the Column 2 field, enter order-md-first
  4. Save and close the grid container content element
  5. Add a Section index to the Left column
  6. Add desired content sections to the Right column
  7. Save and publish as usual. You should observe a page where the Section index is visually positioned to the right of main contents on larger screens and above the contents on smaller screens

Topic 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia eleifend consequat. In vel dapibus nisl, ac condimentum quam. Proin facilisis arcu eget tincidunt molestie. Nullam ullamcorper pellentesque nibh, non pharetra nibh lacinia a. In hac habitasse platea dictumst. In erat orci, bibendum ullamcorper semper nec, mattis id sem. Praesent ac mattis nibh, sit amet cursus sem. Nam finibus, est in varius iaculis, metus magna lobortis libero, quis fermentum velit urna sed mi. Proin pretium eros et erat posuere maximus. Pellentesque urna urna, condimentum quis euismod vehicula, blandit vitae eros. In mauris quam, convallis sit amet volutpat in, venenatis id lorem. Curabitur fermentum turpis in lobortis facilisis.

Topic 2

Cras ut faucibus diam. Etiam in purus quis sem consectetur commodo. Cras quis sapien sit amet neque varius finibus. Praesent iaculis ornare ex et fringilla. Vestibulum volutpat, leo ut auctor efficitur, elit eros finibus lectus, sed pellentesque urna nunc et metus. Ut eu velit nulla. In vel pulvinar metus, vitae scelerisque tellus. Ut sed feugiat eros. Vivamus eget lobortis magna. Quisque sagittis sit amet sapien quis fermentum. Nulla iaculis sagittis ex, vel ornare ex consequat sed.

Sub-topic (2.1)

Phasellus facilisis sapien a elit semper, et congue lacus malesuada. Cras maximus maximus sem tempus bibendum.Nullam bibendum auctor elit. Etiam dignissim elementum turpis in sagittis. Duis imperdiet est vestibulum dui suscipit feugiat. Phasellus non dui diam. In egestas, metus non bibendum eleifend, odio dolor iaculis mauris, sit amet gravida tortor nulla ac nunc. Aenean volutpat dolor vel enim finibus vestibulum. Nulla sodales interdum ipsum, non tempus ante bibendum id. Curabitur purus neque, pellentesque non luctus vel, convallis et libero. Integer eu sapien elementum, placerat quam pellentesque, ultrices quam. Praesent condimentum iaculis orci.Aliquam faucibus fringilla metus, vitae lobortis odio ultricies sed. Morbi consectetur dui in dui ullamcorper dapibus. Cras maximus nibh a mauris vestibulum semper. Donec commodo purus nec metus commodo mollis. Suspendisse feugiat ligula ac metus eleifend, vitae dignissim nibh sollicitudin. Nam sit amet felis placerat, vestibulum dui ac, rhoncus leo. Proin pulvinar varius risus, sed tempor ex venenatis euismod. Donec ac nunc fringilla, vulputate risus a, sagittis mi. Proin aliquam pharetra est, quis tincidunt ante. Aliquam et sapien dictum, condimentum leo sed, condimentum mi.

Sub-sub-topic (2.1.1)

Suspendisse sit amet risus dictum, ornare diam ut, ultricies orci. Cras leo ligula, rutrum nec porttitor in, malesuada sed eros. Sed consequat ultricies convallis. Duis ac lectus imperdiet, ultrices ipsum et, imperdiet justo.Sed sit amet sollicitudin lectus, id ornare mi. Praesent consequat nibh nec purus pulvinar auctor. Aenean ullamcorper, est at imperdiet fringilla, diam erat semper ligula, et vestibulum mauris nibh luctus sapien. Cras scelerisque ac felis quis lacinia. Nam vel pellentesque felis, ut suscipit erat. Praesent tempus nec velit efficitur condimentum. Nullam suscipit nunc neque, ullamcorper pretium elit pretium in. Duis imperdiet semper mi vitae rhoncus.

Sub-sub-sub topic (2.1.1.1)

Integer eget leo posuere, porttitor est varius, posuere elit. Phasellus egestas, magna fermentum laoreet tempus, felis nunc euismod eros, eget dignissim diam ipsum non nunc. Mauris diam orci, finibus in iaculis id, tristique sit amet ligula. Donec vitae lectus magna. Vestibulum lacinia velit ac pulvinar suscipit. Nullam non quam eget nunc scelerisque fringilla at et arcu.

Topic 3

Mauris in auctor nulla. Nam a odio rutrum, tristique arcu vel, hendrerit lectus. Aliquam erat volutpat. Phasellus vel orci ut dolor congue rutrum. Phasellus sit amet laoreet ipsum. Mauris non purus magna. Vestibulum vehicula felis at convallis facilisis. Nam tristique ex metus, quis cursus est maximus ac. Aliquam eget dui aliquam, fringilla odio eget, bibendum dui.Cras dapibus pretium diam, nec commodo tortor. Nullam sit amet sollicitudin augue, a convallis orci. Nullam lobortis sapien sit amet gravida pulvinar. Vivamus quis tempor odio, facilisis tempus diam. Duis luctus commodo orci vitae blandit. Mauris in velit ut tortor tempus vehicula sit amet in lorem. Nulla sagittis arcu at diam faucibus malesuada. Aenean vel mauris gravida, auctor enim dictum, convallis quam.Praesent quis convallis leo, a lacinia neque. Donec non aliquam tellus. Vivamus congue quam nec condimentum volutpat. Fusce tortor urna, maximus et ultricies eget, hendrerit ut turpis. Quisque commodo porttitor lorem, in hendrerit est venenatis eu. Aliquam dapibus nec ante a posuere. Praesent ante ligula, ultrices vitae justo ac, posuere dictum ex. Duis aliquet feugiat molestie. Ut euismod placerat arcu sit amet maximus. Praesent ullamcorper erat ut elit semper, vel imperdiet ipsum consequat. Sed aliquam efficitur libero, ac commodo diam consectetur nec.Ut molestie fermentum diam eget ullamcorper. Mauris mollis sapien nec sem rhoncus tempus. Sed dapibus est at nulla viverra, quis venenatis tortor congue. Nam iaculis mattis felis. Sed in erat eget libero mattis bibendum. Maecenas mollis a arcu vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Suspendisse ut mi placerat risus finibus gravida vitae semper lacus. Sed consequat, lacus ac viverra efficitur, ipsum velit maximus arcu, vel luctus magna magna nec tellus. Etiam tortor quam, sagittis quis felis sed, facilisis commodo nulla. Integer at tortor pharetra, iaculis nibh ac, imperdiet ligula. Pellentesque cursus, libero at vulputate bibendum, dolor enim elementum nunc, a lacinia metus erat pretium mi. Donec cursus neque ac ante elementum, sed efficitur dolor sollicitudin. Fusce ac bibendum quam. Nunc pulvinar mi tristique nisi scelerisque scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam hendrerit eget enim et malesuada. Duis accumsan convallis lacus vel tincidunt. Curabitur quis nisi orci.Integer tincidunt ex nec justo dignissim, ac condimentum dolor sagittis. Suspendisse fringilla mollis tortor ut rhoncus. Cras et ornare nulla. Pellentesque at faucibus diam. Nunc sed mauris nec odio dictum porta. Ut vel ullamcorper ligula, vel malesuada tellus. Nunc auctor at odio ac tempus.Curabitur nec tellus odio. Donec sit amet metus semper, commodo turpis id, aliquam dolor. Sed convallis erat ut erat elementum facilisis. Donec maximus mauris in felis sollicitudin, sit amet congue metus eleifend. Mauris vitae mauris commodo nisl suscipit pretium. Morbi sollicitudin nibh et aliquam porttitor. Vestibulum sagittis quis risus in luctus. Nulla quis elementum magna. Fusce sollicitudin tellus non lectus rutrum dignissim. Vestibulum luctus convallis tristique. Integer elementum ex vitae ipsum viverra iaculis. Etiam nec pharetra turpis, ut tempor quam. Suspendisse congue, dolor nec suscipit tristique, nisi nibh dapibus felis, feugiat pretium felis lectus ut lacus. Quisque aliquam tellus a enim mollis, non ornare turpis dapibus.

Topic 4

Aliquam vitae tempus arcu. Curabitur ullamcorper massa at luctus efficitur. Vivamus eu efficitur libero. In maximus euismod lacus, in sodales dolor feugiat id. In turpis libero, feugiat vel enim at, commodo auctor nisl. Sed facilisis euismod purus convallis malesuada. Fusce ut ex vel purus suscipit efficitur vitae eget est. Donec a lacinia tortor. Suspendisse convallis, ex et aliquet rutrum, massa eros eleifend quam, ultrices consectetur libero odio vitae sem. Duis varius tortor non ex finibus, ut rhoncus purus iaculis. Donec maximus tempus pretium. Proin congue semper tellus, eu euismod augue condimentum vel. Nam in interdum quam, id rutrum arcu. Nulla blandit odio enim, sit amet tristique sapien accumsan id.Maecenas pretium vehicula ipsum, eu placerat libero feugiat a. Duis elementum venenatis urna, id cursus urna sollicitudin posuere. Donec ac convallis mauris, vitae rutrum arcu. Nulla molestie, urna in condimentum mattis, orci justo scelerisque augue, vitae consequat dolor turpis eu neque. Maecenas quis maximus justo. Duis tristique turpis vel sollicitudin lobortis. Proin fringilla pulvinar diam sit amet egestas. Ut ligula ipsum, lobortis a tempor sed, convallis in ipsum. Suspendisse pharetra venenatis nibh. Nulla metus felis, maximus vitae libero id, dignissim eleifend massa. Vestibulum viverra urna velit, aliquam euismod elit malesuada nec.Duis luctus luctus massa non tempor. Proin scelerisque id felis quis egestas. Vivamus et porta ipsum. Curabitur vitae dui finibus, condimentum magna quis, vulputate libero. Morbi in lacus condimentum, sollicitudin libero sed, efficitur lacus. Vestibulum magna lectus, suscipit malesuada ipsum at, tempor dignissim enim. Donec at libero cursus leo sagittis blandit. Vestibulum et risus eleifend augue interdum vestibulum sit amet a velit. Aliquam scelerisque lectus nisl, vel fringilla velit dignissim at. Nulla tincidunt nisi ac purus eleifend egestas. Proin aliquet rhoncus porttitor. Phasellus ultrices metus vel bibendum fringilla. Donec nec magna eu metus dignissim molestie in in diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Top of page