diff --git a/core/modules/responsive_image/src/ResponsiveImageStyleForm.php b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php
index 9e10fe9ee6fba586a61db53e451ce4090f5384b6..6fc982b3236401984fe76aa269e16a078e01f8cf 100644
--- a/core/modules/responsive_image/src/ResponsiveImageStyleForm.php
+++ b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php
@@ -100,6 +100,17 @@ public function form(array $form, FormStateInterface $form_state) {
       '#options' => $this->breakpointManager->getGroups(),
       '#required' => TRUE,
       '#description' => $description,
+      '#ajax' => array(
+        'callback' => '::breakpointMappingFormAjax',
+        'wrapper' => 'responsive-image-style-breakpoints-wrapper',
+      ),
+    );
+
+    $form['keyed_styles'] = array(
+      '#type' => 'container',
+      '#attributes' => array(
+        'id' => 'responsive-image-style-breakpoints-wrapper',
+      ),
     );
 
     // By default, breakpoints are ordered from smallest weight to largest:
@@ -191,6 +202,13 @@ public function form(array $form, FormStateInterface $form_state) {
     return parent::form($form, $form_state, $responsive_image_style);
   }
 
+  /**
+   * Get the form for mapping breakpoints to image styles.
+   */
+  public function breakpointMappingFormAjax($form, FormStateInterface $form_state) {
+    return $form['keyed_styles'];
+  }
+
   /**
    * {@inheritdoc}
    */