HTML/CSS - Responsive Image Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Grid</title>
    
</head>
<body>
 <div class="header" id="myHeader"> 
    <h1>Image Grid</h1>
    <p>Click on the button to change the grid view.</p>
    <button class="btn" onclick="one()">1</button>
    <button class="btn active" onclick="two()">2</button>
    <button class="btn" onclick="four()">4</button>
</div> 
<div class="row">
    <div class="column">
        <img src="https://dl.dropbox.com/s/aoc8rkvc33pzjlv/1503954-sitrep18_covid-19_cameroon.png?dl=0" alt="" style="width: 100%;">
        <img src="https://dl.dropbox.com/s/sz4eid2ljrq56wy/img_rwkjdi.jpg?dl=0" alt="meee" style="width: 100%;">
        <img src="https://dl.dropbox.com/s/9asp837brumulh9/infographie-details-coronavirus-homme-malade-illustre_23-2148438094.jpg?dl=0" alt="" style="width: 100%;">

css

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(120, 30, 150, 0.6);
}
.header {
    text-align: center;
    padding: 32px;
}
/* Created two equal columns that float next to each other*/
.column {
   /* float: left;
    width: 50px;*/
    -ms-flex: 50%;
    padding: 10px;
    flex: 50%;
}
.column img {
    margin-top: 12px;
    vertical-align: middle;
}
/*Clear floats after the columns*/
.row:after {
    content: "";
    display: table;

BROWSER

Console