DSO Component Library

Grid: Ordered 

<section class="grid-example">
    <div class="row">
        <div class="col-sm-5 col-sm-push-7 col-md-4 col-md-push-8">
            <div class="col">sm-5 sm-push-7 md-4 md-push-8</div>
        </div>
        <div class="col-sm-7 col-sm-pull-5 col-md-8 col-md-pull-4">
            <div class="col">sm-7 sm-pull-5 md-8 md-pull-4</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-sm-push-5 col-md-8 col-md-push-4">
            <div class="col">sm-7 sm-push-5 md-8 md-push-4</div>
        </div>
        <div class="col-sm-5 col-sm-pull-7 col-md-4 col-md-pull-8">
            <div class="col">sm-5 sm-pull-7 md-4 md-pull-8</div>
        </div>
    </div>
</section>
 
<section class="grid-example">
  {{#each rows }}
    <div class="row">
      {{#each columns }}
        <div class="{{join (prefix this 'col-') ' ' }}">
          <div class="col">{{join this ' ' }}</div>
        </div>
      {{/each}}
    </div>
  {{/each}}
</section>
 
rows:
  - columns:
      - - sm-5
        - sm-push-7
        - md-4
        - md-push-8
      - - sm-7
        - sm-pull-5
        - md-8
        - md-pull-4
  - columns:
      - - sm-7
        - sm-push-5
        - md-8
        - md-push-4
      - - sm-5
        - sm-pull-7
        - md-4
        - md-pull-8

Voor meer informatie zie Bootstrap Grid system documentatie

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<div class="col">sm-4 md-2</div>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Grid