How to vertically align one column in a two-column grid system(materialize)

Question

I am designing a two-column layout, where some texts sit on the left column and a big img sits on the right. I use col s12 l6 so that on a smaller screen these two would stack together.

I want the left text to be vertically aligned in a large screen but perform normally in a smaller screen. I am using Materialize.

<div class = "container">
    <div class = "row" style="border:solid">
        <div class = "col s12 l6" style="border:solid">
            <p>I want to vertically align in my parent container in big screen,but perform normally when in small screen</p>
       </div>
    <div class = "col s12 l6" style="border:solid">
        <img src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" ></img>
    </div>
</div>

I want in big Screen: I want in small screen:

I am the example link

Answer 1

Solution (Flexbox)

HTML

<div class = "container">
    <div class = "row Aligner" style="border:solid">
        <div class="row Aligner-item--top"></div>
        <div class = "col s12 l6  Aligner-item" style="border:solid">
            <p>I want to vertically align in my parent container in big screen,but perform normally when in small screen</p>
       </div>
       <div class="row Aligner-item--bottom"></div>
    <div class = "col s12 l6" style="border:solid">
        <img src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" ></img>
    </div>
</div>

CSS

@media only screen and (min-width: 900px) {
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}
}

Codepen: https://codepen.io/chrisbradshaw/pen/XYOdXL

1. Add a div with the class of "row Aligner-item--top" above and class "Aligner-item--bottom" below the target div.
2. Add class "Aligner" to parent div.
3. Set "Aligner" class to display:flex, align-items: center, and justify-content: center in CSS.
4. Add "align-self: flex-start;" to top div and "align-self: flex-bottom;" to bottom div.
5. Add media query so that this behavior is only implements on Viewports below 900px.

Original Solution (not optimal, "hard coding" margin-top):

CSS

@media only screen and (min-width: 900px) {
  .v-align {
    margin-top: 10vh;
  }
}

Updated codepen: https://codepen.io/chrisbradshaw/pen/bKzNMR

1. I added class "v-align" on the div containing the paragraph and applied margin-top of 10vh in the CSS to vertically center the text. You could also experiment with CSS Flexbox to get this more precise.

2. Based on feedback from Manoj Kumar, I added media query to the .v-align margin-top so that it would only be applied on Viewports larger than 900px. You can experiment with this to get it perfect.