Digital Chalkboard Exercises
Here is the answer to our multi-part digital exercises from class on Wed Feb. 6.
Tasks:
Create a row of three equal columns that stack below the medium breakpoint
Add an image from my images directory to columns 1 and 3. Add some paragraph text to column 2.
Add a class to the third column so it isn’t visible below the medium breakpoint. We need to use the .d class twice, once to set the default (none) and once to say what to do ABOVE a certain breakpoint.
Use classes on the divs to swap the location of the images
[code language=”html”]
<div class=”container-fluid”>
<div class=”row”>
<div class=”order-3 col-md”>
<img src=”images/IMG_2130.jpg”class=”img-fluid mx-auto”>
</div>
<div class=”order-2 col-md”>
<p>Here is the horse-head figurine we discovered.</p>
</div>
<div class=”order-1 col-md d-none d-md-block”>
<img src=”images/IMG_2131.jpg”class=”img-fluid mx-auto”>
</div>
</div>
</div>
[/code]