Как я могу изменить figcaption под изображением на больших экранах с правой стороны изображения на мобильном устройстве?

Question

Я хочу передать подпись снизу изображения на правую сторону, как показано на следующих изображениях. Мне нужна подпись под изображением, когда оно находится на ноутбуке или планшете, но в правой части, когда веб-сайт меняется на мобильный телефон. Я пробовал гибкость с медиа-запросами, но ничего не изменилось.

Я не знаю, возможно ли это сделать, потому что я не нахожу их в своем поиске.

как ты можешь выйти из этого

к этому

Спасибо за любую возможную помощь:D

мой код

.content {
    display: inline-flex;
    width: 85vw;
    height: 100vh;
    align-content: center;
    background-color: green;
    margin-left:10%;
}

 figcaption {
        
        justify-content: center;
        text-align: center;
        align-content: center;
        align-items: center;
        font-family: 'Lato', sans-serif;
        font-weight: 900;
        color: white;
        text-align: center;
     width: 100%;
        
    }

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 180px) 
and (max-device-width : 480px) {
    
    .content{
        height: 50vh;  
        
    margin-top:25vh;
    margin-bottom: 25vh;
    left: 0;
    right: 0;
    }
    
    .content img{
        
        width: 70%;
    }
    
    figcaption {
        
        width: 70%;
        color:aquamarine;
    }
    
    }
    
   

<div class="content">
   <div class="row align-items-center">
      <div class="col-lg-1 col-md-2">
         <figure>
            <img src='imgs/01.png' alt='missing' />
            <figcaption>300m<sup>2</sup></figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/02.png' alt='missing' />
            <figcaption>4</figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/03.png' alt='missing' />
            <figcaption>6</figcaption>
         </figure>
      </div>
      <div class="col-lg-1 col-md-2 space">
         <figure>
            <img src='imgs/04.png' alt='missing' />
            <figcaption>300m<sup>2</sup></figcaption>
         </figure>
      </div>
   </div>
</div>

и я не знаю, что я могу изменить.

Спасибо за любую помощь.