Improvement in the CSS

Question

I’m creating a simple CSS just to be used in creating Cordova app.

I’m having difficulties in case you want to put the columns in rows.

.row {
  display: flex;
}

.col {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-1 {
  display: flex;
  width: 25%;
}

.col-2 {
  display: flex;
  width: 50%;
}

.col-3 {
  display: flex;
  width: 75%;
}

.col-4 {
  display: flex;
  width: 100%;
}

.form-control {
  display: block;
}

.hidden {
  display: none;
}

.btn2{
    background: #3f51b5;
    color: #fff;
    border-radius: 3px;
    width: 100%;
    height: 53px;
    padding: 15px;
    border: 0px;
    cursor: pointer;
    font-size: 17px;
}.btn2:active{
    opacity: 0.75;
}

.mr-1{
    margin-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-4">
    <img src="assets/imgs/foto.png" alt="foto" class="responsive">
  </div>
  <div class="col-2 mr-1">
    <button type="button" class="btn2 btn-foto">Foto</button>
  </div>
  <div class="col-2">
    <button type="button" class="btn2 red btn-foto-apagar">X</button>
  </div>
</div>

The above code generates this highlighted part in red:

Question:

How to make the image occupy the entire width and the two buttons are below the image side by side.

Thank you.

Answer 1

The best way would be to take the div that has your image from inside the div that has the Row class

<div class="col-4">
    <img src="assets/imgs/foto.png" alt="foto" class="responsive">
</div>
<div class="row">
    
    <div class="col-2 mr-1">
        <button type="button" class="btn2 btn-foto">Foto</button>
    </div>
    <div class="col-2">
        <button type="button" class="btn2 red btn-foto-apagar">X</button>
    </div>
</div>