How to position div-CodePudding

I want to make it like thiswhat I want but I am not able to do it. I am unable to do so what I am getting what I have. I want to flip position as well as to make them appear in the same div. Any help will be appreciated

<script>
    $(document).ready(function(){
        var $mainImg = $("#main");
        var $mainLink = $("#header > a");
        $(".thumbs").mouseover(function(){
            var src = $(this).attr("src");
            var link = $(this).parent().attr("href");
            console.log(link);
            var doubleWidth = $(this).width()*3;
            var doubleHeight = $(this).height()*3;
            $mainImg.attr("src",src);
            $mainImg.css({"width":doubleWidth,"height:":doubleHeight})
            $mainLink.attr("href",link);
       });
    });
</script>

<body>
    <style>
        
    </style>
    
        <div id="header">
            <a href="{% url 'new' %}">
                <img id="main" src="{% static 'images/banner/pic9.jpg' %}" width="60%" height="250"  alt="people">
            </a>
        </div>
        
            <div id="footer">
                <img  src="{% static 'images/banner/pic1.jpg' %}" width="200" height="200" alt="handshake">
            
                
            <a href="{% url 'new' %}">
                <img  src="{% static 'images/banner/pic5.jpg' %}" width="200" height="200" alt="peoplejoined">
            </a>
            
            <a href="#">
            <img  src="{% static 'images/banner/pic7.png' %}" width="200" height="200" alt="unisex">
            </a>
            <a href="#">
            <img  src="{% static 'images/banner/pic8.jpg' %}"width="200" height="200" alt="yoga">
            </a>
       
    </div>

CodePudding user response：

$(".js-post").on("mouseover", function() {
  const mainSrc = $(".js-main").attr("src");
  const targetSrc = $(this).attr("src");
  
  $(".js-main").attr("src", targetSrc);
  $(this).attr("src", mainSrc);  
});

.wrapper {
  display: flex;
}

.main-view {
  width: 300px;
  margin-right: 1rem;
}

.thumbnail-view {
  width: 100px;
}

.post {
  width: 100%;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >
    <div>heading</div>
    <img  src="https://picsum.photos/300/200?random=1" /> 
  </div>
  <div >
    <img  src="https://picsum.photos/300/200?random=2" />
    <img  src="https://picsum.photos/300/200?random=3" />
    <img  src="https://picsum.photos/300/200?random=4" />
    <img  src="https://picsum.photos/300/200?random=5" />
  </div>
</div>