Scenario: Build a pagination partial consisting of 3 parts – the item range (e.g. “Showing 1 – 10 of 30 results”), a dropdown to select the page and a dropdown to select the number of items per page. The 3 parts will be displayed in a different order and have different text alignment on mobile and desktop. See CodePen demo.
Result on desktop: All 3 parts will be on the same row. The item range will be left-aligned, the page dropdown center-aligned and the items per page dropdown right-aligned, with their order being 1st, 2nd and 3rd respectively. Illustration below.
+----------------------------------------------------------------------+ | | | +---+ +----+ | | Showing 1 - 10 Page | 1 | Items per page | 25 | | | of 30 results +---+ +----+ | | | | | +----------------------------------------------------------------------+
Result on mobile: Both dropdowns will be on the same row with the item range far below them. The items per page dropdown will be left-aligned, the page dropdown right-aligned and the item range center-aligned, with their order being 1st, 2nd and 3rd respectively. Illustration below.
+----------------------------------------------------+ | | | +----+ +---+ | | Items per page | 25 | Page | 1 | | | +----+ +---+ | | | | | | | | Showing 1 - 10 of 30 results | | | +----------------------------------------------------+
HTML code using Bootstrap:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="row p-3">
<div class="col-12 order-3 text-center mt-5 col-sm-4 order-sm-1 text-sm-start mt-sm-0">
Showing 1 - 10 of 30 results
</div>
<div class="col-6 order-2 text-end col-sm-4 order-sm-2 text-sm-center">
<label>Page</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-6 order-1 text-start col-sm-4 order-sm-3 text-sm-end">
<label>Items Per Page</label>
<select>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
</div>
</body>
</html>