Incorporating Vuetify into my project, I am faced with the challenge of changing the image location for smaller screens.
Here is my current code: https://codepen.io/yash-dhume/pen/pozMQBg?&editable=true&editors=101
<section>
<v-container fluid justify-space-between>
<v-layout column>
<v-card transition="slide-x-transition">
<v-layout row justify-space-around align-center>
<v-flex xs7 align-center justify-center layout text-xs-straight>
<v-card-title primary-title class="justify-center">
<div>
<div class="display-2">About Me</div>
<p class="text-justify al">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</v-card-title>
</v-flex>
<div>
<img max-width="300" src="https://loremflickr.com/640/360"> </img>
</div>
<div class="fill-height bottom-gradient"></div>
</v-layout>
</v-card>
</v-layout>
</v-container>
</section>
I want the image to appear below the "About Me" title and paragraph on medium or small screens. How can I achieve this?