Modal stopped responding on desktop - html

Question

So, I was trying to make my modal only work on screens smaller than tablets. That worked successfully.
But now, I made some changes and I need to home to work on desktop size as well.
I tried removing the d-none to d-block but it didn't work
Any ideas?
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="assets/about/about1.jpg" class="img-fluid">
<a href="#myModal" role="button" data-toggle="modal" class="d-inline d-xl-none"><figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption></a>
<figcaption class="d-none d-xl-inline">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="assets/about/about1.jpg" class="img-fluid">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</div>
</div>
</div>
</div>

Answer 1

Well, that's just because I had designed that code snippet to work that way. That behavior was what the original asker wanted.
So, to get the link show up on large screens (everywhere basically), you just comment out or remove the second figcaption and also remove the d-xl-none class from the first one.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="https://placeimg.com/640/480/animals" class="img-fluid">
<a href="#myModal" role="button" data-toggle="modal" class="d-inline"><figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption></a>
<!--
<figcaption class="d-none d-xl-inline">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption>
-->
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="https://placeimg.com/540/380/animals" class="img-fluid">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>