Stack images one on top of another - css

Question

In bootstrap with the grid system elements are automatically arranged side by side but is there a way to stack elements one on top of another?
I'm trying to create a photo gallery where i'm displaying 4 images,hiding them and triggering each photo with an assigned button.
But because these images are first arranged side by side,every time I show one image and hide the other the frame is being shifted.
Example:
So if the first image starts at point A the last image ends at point D.
Here is the code that I am using
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$("#gallerytrigger_1").on('click',function(){
$("#gallery_1").toggle();
$("#gallery_2").hide();
$("#gallery_3").hide();
$("#gallery_4").hide();
});
$("#gallerytrigger_2").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").hide();
$("#gallery_2").toggle();
$("#gallery_1").hide();
});
$("#gallerytrigger_3").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").toggle();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
$("#gallerytrigger_4").on('click',function(){
$("#gallery_4").toggle();
$("#gallery_3").hide();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
</script
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach

Answer 1

Try this code
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(".galleryTrigger").click(function(){
var id = $(this).data('id');
$(".gallery").hide();
$("#gallery_"+id).show();
});
</script>
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;" class="gallery">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}" data-id="{{$loop->iteration}}" class="galleryTrigger">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach